Question

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

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

Answer 1

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

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

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

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

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

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

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

除了拥有正确的import语句外，您还需要显示该routerLink的位置，该位置位于<router-outlet></router-outlet>元素中，因此还需要将其放置在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信息阅读此topic

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

Answer 5

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

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

Answer 6

在working sample之后，我想出了纯组件的解决方案：

Answer 7

对于不是像我这样敏锐的眼睛，我用href而不是routerLink，带我进行了几次搜索以找出#facepalm。

Answer 8

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

<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

Answer 9

我知道这个问题到现在为止已经很老了，您很可能已经修复了，但是我想在这里发布任何对本文进行故障排除的参考，以解决此问题。如果您的Anchor标记位于Index.html中，则无法使用。它必须位于组件之一中

Answer 10

对于在拆分模块后出现此错误的任何人，请检查您的路线，

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

Answer 11

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

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

只需再次检查拼写。

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]的结束引号结尾与next属性之间没有空格。换行器将其分成两行，因此丢失的空间不被注意。

Answer 14

我使用的是routerlink而不是 routerLink 。

RouterLink不起作用

14 个答案: