javascript - Angular 2 root 的路由始终处于事件状态

Question

最近我读了this useful article about Angular 2 Router并查看了the demo .一切似乎都很完美。但是当我试图根据 router-link-active 确定事件路线时类，我发现根路由始终处于事件状态。

这是配置“主要”路由的 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 { }

如果我从 '/' 更改路径至 '/home'和 <a [routerLink]="['/']">Home</a>至 <a [routerLink]="['/home']">Home</a>默认组件(必须是 HomeComponent)消失了。只有单击链接并且 router-link-active 才会激活 HomeComponent。每次我们更改到另一条路线时都会正确添加和删除。

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

Answer 1

将以下属性添加到您的主页 anchor 对我有用。[routerLinkActiveOptions]="{ exact: true }"

了解更多 https://github.com/angular/angular/issues/8397#issuecomment-237314970