RouterLink不起作用

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

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

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

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

我遇到了类似的问题，并且花了一些时间才能解决，因为此步骤未在文档中提及。

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

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

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

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

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

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

<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="https://stackoverflow.com/">

像这样使用它来获取信息，请阅读本主题

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

您可以阅读本教程

我使用的是routerlink而不是routerLink。

我知道这个问题到现在为止已经很老了，您现在很可能已经解决了，但是我想在此处发布该文章，作为在解决该问题时找到该帖子的任何人的参考，因为这种事情已经赢得了如果您的Anchor标记位于Index.html中，则该方法无效。它必须在组件之一中

对于在拆分模块后检查您的路由的人有此错误，以下事情发生在我身上：

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

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

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

在工作样本之后，我已经找到了针对纯组件的解决方案：

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

对于像我这样不是很敏锐的眼睛，我href取而代之的是routerLink，我进行了一些搜索以找出#facepalm。