角2根的路线始终处于活动状态

最近我读了this useful article about Angular 2 Router，看着the demo。一切似乎都很完美。但是，当我尝试根据router-link-active类来确定活动路由时，我发现根路由始终处于活动状态。角2根的路线始终处于活动状态

这里是一块app.component.ts的代码，其中“主”路线被配置：

@Component({ 
    selector: 'demo-app', 
    template: ` 
    <a [routerLink]="['/']">Home</a> 
     <a [routerLink]="['/about']">About</a> 
    <div class="outer-outlet"> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    // add our router directives we will be using 
    directives: [ROUTER_DIRECTIVES] 
}) 
@Routes([ 
    // these are our two routes 
    { path: '/', name: 'Home', component: HomeComponent }, // , useAsDefault: true}, // coming soon 
    { path: '/about', name: 'About', component: AboutComponent } 
]) 
export class AppComponent { }

如果我改变到<a [routerLink]="['/home']">Home</a>默认组件（从'/'到'/home'和<a [routerLink]="['/']">Home</a>路径必须是HomeComponent）消失。 HomeComponent只有在链接被点击后才会被激活，并且每当我们改变到另一个路线时，router-link-active将被正确添加和删除。

这是一个错误还是路由配置有问题？

来源

2016-06-09 asubanovsky

此链接可能是你感兴趣的https://github.com/angular/angular/issues/8397 – yurzui

嗨@yurzui，感谢您的链接。这非常有帮助。原来，这就是Angular 2路线的作用方式。所以我必须做我自己的解决方法.. :( – asubanovsky

yurzui s链接似乎是关于新的路由器。对于测试版和RC.1'@ angular/router-deprecated' https://github.com/angular/angular/issues/5334似乎是相关的问题。 –

作品添加以下属性到你家的锚为我工作。 [routerLinkActiveOptions]="{ exact: true }"

来源

2016-10-17 23:24:46

感谢您的领导对于其他寻找这个，这里是这个功能的官方文档：https：//angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html – Martin

对我而言，这不是一个错误，您需要为/或未知路径设置备用组件。（最有可能HomeComponent）

@Routes([ 
    { path: '/home', component: HomeComponent }, 
    { path: '/about', component: AboutComponent }, 
    { path: '*', name: component: HomeComponent } 
]);

这虽然是使用新的Router模块（未弃用的一个），并在rc.0和rc.1

来源

2016-06-09 01:35:31

感谢你的回应，但它没有帮助，我想，当我们定义一个根路由“/”时，它会使另一条路径如“/ about”像其子节点一样行为。出现“route-link-active”类。 – asubanovsky

这是它是如何工作的：

<nav> 
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a> 
    <a routerLink="/about" routerLinkActive="active">About</a> 
</nav>

来源

2017-10-08 12:14:17 yogihosting

角2根的路线始终处于活动状态

回答

相关问题