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

小开

像这样使用 mroe 信息读这个话题

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

小开

链接是错误的，你必须这样做:

<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 { }

除了拥有正确的 import 语句之外，还需要一个位置来显示 routerLink，这个位置在 <router-outlet></router-outlet>元素中，因此这个位置也需要放在 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>

另外，在 index.html 的头部添加以下内容:

<base href="/">

小开

不要忘记在你的模板中添加以下内容:

<router-outlet></router-outlet>

小开

我用的是路由器链路而不是 路由器连接。

小开

我知道这个问题现在已经很老了，而且你很可能已经解决了，但是我想在这里发布一篇文章作为参考，供那些在解决这个问题的时候发现这篇文章的人参考，因为如果锚标签在 Index.html 中，这种方法就不起作用了。它必须在其中一个组件里

小开

对于任何人有这个错误 在分离模块之后检查您的路线，以下发生在我身上:

公共路由模块.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- 路由.module.ts:

const routes: Routes = [
];


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

将 { path: '**', redirectTo: 'home' }移动到 AppRoutingModule:

公共路由模块.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- 路由.module.ts:

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


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

小开

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

例如，我曾试图返回 obj && obj[key]的内容。经过一段时间的调试，然后我意识到我必须手动转换为布尔类型，如 Boolean(obj && obj[key])，以便让点击通过。

小开

遵循工作样本，我已经找到了纯组件的解决方案:

小开

因为我的眼睛不是很敏锐，所以我用 href代替了 routerLink，我用了几次搜索才找到了 # 面部手掌。

小开

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

<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 active 放在 style.scss 中的 root 中

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

如果其他解决方案没有帮到你，我希望它能帮到你。

小开

在我的例子中，我在 VS 代码中使用了行包装器，显然，在属于[ routerLink ]的结束引号和 next 属性之间没有空格。行包装器将其分成两行，因此缺少的空间不会被注意到。

小开

我能够通过将导航链接从 Index 页面移动到组件来解决我的问题(我实际上在 Index.html 中添加了模板)

小开

如果您在使用 https://stackblitz.com/作为在线 IDE 时遵循 https://angular.io/start/start-routing教程，请在一个新窗口中打开/刷新它。