Angular routerLink不会导航到相应的组件
Angular routerLink不会导航到相应的组件
提问于 2016-08-08 23:14:13
我在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>我希望，当我单击它们时，它会导航到相应的组件，但它们不会执行任何操作？
回答 12
Stack Overflow用户
回答已采纳
发布于 2016-11-18 21:56:53
您在那里显示的代码是绝对正确的。
我怀疑您的问题是没有将RouterModule (声明RouterLink的位置)导入到使用此模板的模块中。
我遇到了类似的问题，它花了我一些时间来解决，因为文档中没有提到这一步。
因此，转到使用此模板声明组件的模块，并添加：
import { RouterModule } from '@angular/router';然后将其添加到您的模块导入中，例如
@NgModule({
imports: [
CommonModule,
RouterModule
],
declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }除了具有正确的导入语句之外，您还需要在<router-outlet></router-outlet>元素中为该routerLink提供一个显示位置，以便还需要将其放置在您的HTML标记中的某个位置，以便路由器知道在何处显示该数据。
Stack Overflow用户
发布于 2017-05-12 01:21:18
别忘了在你的模板中添加以下代码：
<router-outlet></router-outlet>Stack Overflow用户
发布于 2016-11-19 05:44:54
尝试更改链接，如下所示：
<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的header中添加以下内容：
<base href="/">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38832851
复制相关文章
相似问题
腾讯云开发者
