1

angular 7では、別のコンポーネントappフォルダーを定義し、ルートでコンポーネントを定義しましたが、URLでルーター名を定義するとうまくいきますが、アンカータグでそのルート名を定義すると、そのURLに接続されているコンポーネントが正常に表示されますクリックアンカーで、ここで機能しないのは私のhtmlコードです

<li class="nav-item">
  <a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item @@about">
  <a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item @@blog">
  <a class="nav-link" routerLink="/blog">BLOG</a>
</li>

これは私のルーターです

const routes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'blog',
    component: BlogComponent
  },
];
4

4 に答える 4

3

アンカー タグが青色にならない場合は、routerLink がアンカー タグにバインドされていないことを意味します。輸入していないからRouterModuleです。

RouterModule注:このコンポーネントを宣言したモジュールにインポートする必要があります。ここrouterLinkでは、app.module.ts. 例：あなたが持っていhome.component.tsて、あなたが使用しhome.module.tsたい場合は、追加してください<a [routerLink]="[/student]"></a>home.component.htmlRouterModulehome.module.ts 

import {RouterModule} from '@angular/router';
@NgModule(
{ 
  ...
   import:[
     ...
       RouterModule
     ...
   ]
  ...
}
)
于 2019-12-06T09:12:26.853 に答える
0

このようにしてみてください：

次のようにRouterModuleを定義します。

RouterModule.forRoot([
  { path: 'home', component: HomeComponent },
  { path: 'blog', component: BlogComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: 'home' }
])

テンプレート：

<li class="nav-item">
    <a class="nav-link" routerLink="/home">Home</a>
  </li>
  <li class="nav-item @@about">
    <a class="nav-link" routerLink="/about">About</a>
  </li>
  <li class="nav-item @@blog">
    <a class="nav-link" routerLink="/blog">BLOG</a>
  </li>  
<router-outlet></router-outlet>

注: 追加する必要があります<router-outlet></router-outlet>

ワーキングデモ

于 2019-12-06T08:25:59.337 に答える