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

Posted 2023-03-13

【中文标题】Angular routerLink 不会导航到相应的组件

【英文标题】：Angular routerLink does not navigate to the corresponding component

【发布时间】：2016-12-14 10:39:08

【问题描述】：

我在 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>

我希望，当我单击它们时，它会导航到相应的组件，但它们不执行任何操作？

【问题讨论】：

你能试试[routerLink]='[/home']吗？你用的是什么Angular2版本和路由器版本？

它不起作用。你确定你引用的地方吗？我想我正在使用 angular2 的最新版本，但我不知道如何检查它。我用 ng new 生成了它。它应该更新

对不起，应该是[routerLink]="['/home']"

也许您忘记将directives: [ROUTER_DIRECTIVES], 添加到组件的元数据中。没有它，Angular 将不知道解析 routerLinks。

Angular2 Router link not working的可能重复

【参考方案1】：

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

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

【讨论】：

根据您的链接，他的 routerLink 应该可以工作 ;-)

这适用于 "@angular/router": "~3.4.0" 。干杯！

是的，括号表示法有效（并且是具有特定用途的有效语法），但它不是这个问题的解决方案。

【参考方案2】：

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

<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

【讨论】：

括号符号用于不同的目的，并不能解决这个问题。

就是这样！ Home 我按照教程将 routerLinkActive 放在 标签中。当我将它放在

顺便说一句，我已经准备好所有其他标签/建议的元素。现在这个功能起作用了（有点）。我必须遵循本教程的其余部分，因为我注意到当我选择其他行时，即使正在传递所选行的值（我在 url 中看到它），也只会呈现第一行。但这将是另一个话题。再次感谢您的大力帮助。

我不知道为什么，但是当我放 Bracket 时，它对我有用，而且我没有在我的应用模块中导入 RouterModule..

【参考方案3】：

您在此处显示的代码绝对正确。

我怀疑你的问题是你没有将 RouterModule（RouterLink 声明的地方）导入到使用这个模板的模块中。

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

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

import  RouterModule  from '@angular/router';

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

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

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

【讨论】：

我是这么想的，是的——在我的情况下你也完全正确！

将路由器模块添加到我的导入中成功了，谢谢！

对我来说没有任何帮助。我在自定义HttpErrorComponent 中有这个问题，它显示错误信息。因此，例如，如果我的页面由于权限保护而未加载并且仅显示错误 403 - 此页面上带有 routerLink 的主页按钮不起作用（不可点击）。

【参考方案4】：

尝试如下更改链接：

  <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="/">

【参考方案5】：

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

<router-outlet></router-outlet>

【参考方案6】：

我使用的是 routerlink 而不是 routerLink。

【讨论】：

我犯了这个错误，这解决了它！我也不知道您为什么被否决（也许是因为这可能是评论，或者因为它没有直接回答这个特定问题？）。如果投反对票的人能提供一个理由就好了。

【参考方案7】：

我知道这个问题现在已经相当老了，而且您现在很可能已经修复了它，但我想在此处发布作为在解决此问题时发现此帖子的任何人的参考如果您的 Anchor 标记位于 Index.html 中，那么事情将不起作用。它需要在其中一个组件中

【参考方案8】：

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

public-routing.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' 移动到您的 AppRoutingModule：

public-routing.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  

【讨论】：

请你解释一下为什么？

【参考方案9】：

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

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

【参考方案10】：

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

Declare component at app level 做not init in component

【参考方案11】：

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

【参考方案12】：

大部分时间问题是拼写错误

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

再次检查拼写。

【参考方案13】：

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

我使用 Angular 材质的导航栏项目是：

<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;
  

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

【参考方案14】：

在我的情况下，我的 VS 代码中有换行符，显然，在属于 [routerLink] 的右引号结尾和下一个属性之间没有空格。换行器将其分成两行，因此丢失的空间不会被注意到。

【讨论】：

你来自哪里，佐尔卡？ :)

【参考方案15】：

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