在角2，router.isActiveRoute不工作的第一次 [英] In Angular 2, router.isActiveRoute not working for the first time

问题描述

我使用router.isActiveRoute确定哪个路线是有效的。
在我第一次路线主页链接或菜单链接，路线的变化，但活动类不添加。 活动类在第二次单击添加。

I use router.isActiveRoute to determine which route is active. At the first time I route to home link or menu link, the route changes but active class isn't added. active class is added at the second click.

我认为这是angular2路由器指令的错误。
请告诉我为什么，以及如何解决它？

I think it's bug of Router directive in angular2. Please tell me why and how to fix it?

app.ts

...
@Component({
    selector: 'app',
    directives: [ROUTER_DIRECTIVES],
    templateUrl: 'app/components/app.html',
    styleUrls: ['app/components/app.css']
})
@RouteConfig([
    { path: '/', component: Home, name: 'Home'},
    { path: '/menu', component: Menu, name: 'Menu'}
])
class AppComponent {
    constructor(public router: Router) {
    }
    isActiveRoutes(routes) {
        return this.router.isRouteActive(this.router.generate(routes));
    }
}

app.html

<a [routerLink]="['Home']">
    <div class="icon-box" [class.active]="isActiveRoutes(['/Home'])">
        <i class="icon ion-ios-list-outline"></i>
    </div>
</a>
<a [routerLink]="['Menu']">
    <div class="icon-box" [class.active]="isActiveRoutes(['/Menu'])">
        <i class="icon ion-ios-bookmarks-outline"></i>
    </div>
</a>
<router-outlet></router-outlet>

感谢

推荐答案

解决的办法很简单。 system.js脚本标签下方移动angular2-polyfills.js的伎俩。
这是一个已知的问题＃6140 。
有一个演示链接也。

The solution is easy. Moving angular2-polyfills.js below system.js script tag did the trick. This is a known issue #6140. There is a demo link also.

@Component({
  selector: 'my-app', 
  providers: [],
  template: `
    <div>
        <ul>
          <li>
            <a [routerLink]="['First']">First</a>
          </li>
          <li>
            <a [routerLink]="['Second']">Second</a>
          </li>
          <li>
            <a [routerLink]="['Third']">Third</a>
          </li>
        </ul>
    </div>
    <router-outlet></router-outlet>
  `,
  styles: [".router-link-active { background-color: red; }"],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path: "/first", name: "First", component: FirstComponent},
  {path: "/second", name: "Second", component: SecondComponent},
  {path: "/third", name: "Third", component: ThirdComponent}
])
export class App { }

这篇关于在角2，router.isActiveRoute不工作的第一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！