web-dev-qa-db-ja.com

RouterLinkがAngular 6で機能していません

BradTraversyのチュートリアルを見ながらコーディングしていました。そして私はそれが言われている通りにした。これは私の「app.module.ts」です。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { HomeComponent } from './components/home/home.component';
import { ProfileComponent } from './components/profile/profile.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

const appRoutes: Routes = [
  {path:'', component: HomeComponent},
  {path:'register', component: RegisterComponent},
  {path:'login', component: LoginComponent},
  {path:'dashboard', component: DashboardComponent},
  {path:'profile', component: ProfileComponent}
] 
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent,
    ProfileComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) // appRoutes: an object

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

これは私のナビゲーションバーコンポーネントです

 <li><a class="nav-link" [routerLink] = "['/']" [routerLinkActive]=" 
['active']">Home</a></li>
 <li><a class="nav-link" [routerLink] = "['/login']" [routerLinkActive]=" 
['active']">Login</a></li>

私も追加しました

<base href="/">

index.htmlファイルに。

RouterLinkパーツを削除すると、ページは正常に機能しています。URLにパスを指定すると、コンポーネント内のコンテンツが表示されます。

私はいくつかの質問をチェックインしました。しかし、私はすべてをしました、私は答えを見つけることができません。

node.jsangularnpmrouterlinkangular-cli-v6
3
maneesha

更新：私の答えを改善するため。あなたがやろうとしているのは、中括弧で囲まれた[routerLink]を追加してディレクティブを呼び出すことです。次に、JavaScriptとして評価される文字列をルートに渡します。これは機能しないため、有効なJavaScriptを渡す必要があります。ルートの配列。

次のように、routerlinkからスラッシュと引用符を削除してみてください。

 <li><a class="nav-link" [routerLink]=['/'] [routerLinkActive]=['active']>Home</a></li>
 <li><a class="nav-link" [routerLink]=['/login'] [routerLinkActive]=['active']>Login</a></li>

説明したように ここ：

これがうまくいかない場合は、遠慮なくコメントしてください。回答を更新します。

よろしくクリス

0
ChrisEenberg