Angular routerLink 没有导航到相应的组件

Question

我在 angular2 应用程序中的路由运行良好。 但我将基于此制作一些 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>

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

Answer 1

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

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

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

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

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

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

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

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

Answer 2

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

<router-outlet></router-outlet>

Answer 3

尝试更改链接如下：

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

Answer 4

像这样使用 mroe 信息阅读这个主题

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

Answer 5

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

Answer 6

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

公共路由.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：

公共路由.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 { }

Answer 7

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

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

您可以阅读本教程

Answer 8

我使用的是 routerlink 而不是routerLink 。

Answer 9

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

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

Answer 10

按照工作示例，我已经找到了纯组件情况的解决方案：

1. 在应用程序级别声明组件
2. 不要在组件中初始化

Answer 11

对于像我这样不太敏锐的眼睛，我使用href而不是routerLink ，花了我几次搜索来弄清楚#facepalm。

Answer 12

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

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

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

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

Answer 13

就我而言，我的 VS 代码中有换行符，显然，属于 [routerLink] 的结束引号和下一个属性之间没有空格。 Line-wrapper 把它分成两行，所以没有注意到缺少的空间。

Answer 14

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

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

只需再次检查拼写。

Answer 15

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

Answer 16

Incase you're following https://angular.io/start/start-routing tutorial while using https://stackblitz.com/ as online IDE, opening/refreshing it in an new window fixed it.

Answer 17

尝试在“ app.module.ts ”或相应模块文件的声明数组中添加您创建的组件，以便您的模块知道您已经创建了这些组件。 也不要忘记导入 CommonModule 和 RouterModule。

import {AboutComponent} from './about.component';
import {FormComponent} from './form.component';

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