Angular routerLink 不会导航到相应的组件

您在那里显示的代码绝对正确。

我怀疑您的问题是您没有将 RouterModule （声明 RouterLink 的位置）导入使用此模板的模块中。

我有一个类似的问题，我花了一些时间来解决，因为文档中没有提到这个步骤。

因此，转到使用此模板声明组件的模块并添加：

import { RouterModule } from '@angular/router';

然后将其添加到您的模块导入中，例如

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

除了拥有正确的导入语句外，您还需要一个显示 routerLink 的位置，该位置位于 <router-outlet></router-outlet> 元素中，因此还需要将其放置在 HTML 标记中的某个位置，以便路由器知道在哪里显示那个数据。

---

不要忘记在您的模板中添加以下内容：

<router-outlet></router-outlet>

---

尝试更改链接如下：

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

此外，在 index.html 的标头中添加以下内容：

<base href="/">

---

像这样使用它来获取更多信息阅读此topic

<a [routerLink]="['/about']">About this</a>

---

对于拆分模块后遇到此错误的任何人，请检查您的路线，以下发生在我身上：

公共路由.module.ts：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

应用程序路由.module.ts：

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

将 { path: '**', redirectTo: 'home' } 移至您的 AppRoutingModule：

公共路由.module.ts：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

应用程序路由.module.ts：

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

---

我知道这个问题现在已经相当老了，你现在很可能已经修复了它，但我想在这里发帖作为任何人在解决这个问题时发现这篇文章的参考是这种事情赢了如果您的 Anchor 标记在 Index.html 中，则它不起作用。它需要在其中一个组件中

---

我使用的是routerlink而不是routerLink。

---

链接错误，您必须这样做：

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

您可以阅读此tutorial

---

还有另一种情况适合这种情况。如果在你的拦截器中，你让它返回非布尔值，最终结果就是这样。

例如，我曾尝试返回 obj && obj[key] 东西。调试了一段时间后，我意识到我必须像 Boolean(obj && obj[key]) 一样手动将其转换为布尔类型才能让点击通过。

---

在 working sample 之后，我已经找到了纯组件情况的解决方案：

在应用级别声明组件 不要在组件中初始化

---

对于像我这样不是很敏锐的眼睛，我用的是 href 而不是 routerLink，我搜索了几次才弄明白#facepalm。

---

如果您将导航栏放在组件中，并且在该样式表中声明您的样式处于活动状态，则它将不起作用。就我而言，这就是问题所在。

我使用有角材料的导航栏项目是：

<div class="nav-item">
        <a routerLink="/test" routerLinkActive="active">
          <mat-icon>monetization_on</mat-icon>My link
        </a>
<mat-divider class="nav-divider" [vertical]="true"></mat-divider>

所以我将 style.scss 中的样式激活在根目录中

a.active {
  color: white !important;
  mat-icon {
    color: white !important;
  }
}

如果其他解决方案没有，我希望它对您有所帮助。

---

就我而言，我的 VS 代码中有换行器，显然，在属于 [routerLink] 的结束引号和下一个属性之间没有空格。换行器将其分成两行，因此丢失的空间未被注意到。

---

大多数时候问题是拼写错误

<a [routerLink]="['/home']" routerLinkActive="active">Home</a>

只需再次检查拼写。

---

我能够解决我的问题，我将导航链接从索引页面移动到组件（我实际上在 index.html 中添加了模板）

---