我在 Angular2 应用程序中的路由运行良好。但我将根据this制作一些routeLink：
这是我的路线：
const routes: RouterConfig = [
{ path:'home' , component: FormComponent },
{ path:'about', component: AboutComponent },
{ path:'**' , component: FormComponent }
];
这是我制作的链接：
<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>
我希望当我单击它们时，它会导航到相应的组件，但它们不执行任何操作？
您在那里显示的代码绝对正确。
我怀疑你的问题是你没有将 RouterModule （这是声明 RouterLink 的地方）导入到使用此模板的模块中。
我遇到了类似的问题，我花了一些时间才解决，因为文档中没有提到此步骤。
因此转到使用此模板声明组件的模块并添加：
import { RouterModule } from '@angular/router';
然后将其添加到您的模块导入中，例如
@NgModule({
imports: [
CommonModule,
RouterModule
],
declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }
除了拥有正确的导入语句之外，您还需要一个显示 routerLink 的位置，该位置位于
<router-outlet></router-outlet>不要忘记将其添加到您的模板中：
<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="/">像这样使用它来获取更多信息，请阅读此主题
<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 { }
app-routing.module.ts：
const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
将
{ path: '**', redirectTo: 'home' }公共路由.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 { }
app-routing.module.ts：
const routes: Routes = [
{ path: '**', redirectTo: 'home' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我使用的是 routerlink 而不是 routerLink。
我知道这个问题现在已经相当老了，而且你现在很可能已经解决了它，但我想在这里发帖作为任何在解决这个问题时找到这篇文章的人的参考，这种事情如果您的锚标记位于 Index.html 中，则该方法将不起作用。它需要位于其中一个组件中
链接错误，你必须这样做：
<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>
您可以阅读此教程
还有另一种情况适合这种情况。如果在你的拦截器中，你让它返回非布尔值，最终结果就是这样。
例如，我曾尝试退回
obj && obj[key]Boolean(obj && obj[key])按照工作示例，我找到了纯组件情况的解决方案：
对于像我这样不太敏锐的眼睛，我用
hrefrouterLink大多数时候问题是
中的拼写错误<a [routerLink]="['/home']" routerLinkActive="active">Home</a>
再次检查拼写即可。
如果您的导航栏位于组件内，并且您在该样式表中声明了您的样式处于活动状态，则它将不起作用。就我而言，这就是问题所在。
我的导航栏使用角度材料的项目是：
<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] 的结束引号末尾和下一个属性之间没有空格。换行器将其分成两行，因此缺少的空间不会被注意到。
如果您在使用 https://stackblitz.com/ 作为在线 IDE 时遵循 https://angular.io/start/start-routing 教程，请在新窗口中打开/刷新它来修复它。
我能够通过将导航链接从索引页面移动到组件来解决我的问题（我实际上在index.html中添加了模板）
尝试添加您在“app.module.ts”或相应模块文件中的declarations数组中创建的组件，以便您的模块知道您已经创建了这些组件。另外不要忘记导入 CommonModule 和 RouterModule。
import {AboutComponent} from './about.component';
import {FormComponent} from './form.component';
@NgModule({
imports: [
CommonModule,
RouterModule
],
declarations: [FormComponent, AboutComponent]
})
export class MyTemplatesModule { }
如果您使用独立组件，请确保将
RouterLinkRouterLinkActiveRouterOutlet请参阅文档了解更多信息
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'routing-app';
}