В Angular 2, router.isActiveRoute не работает в первый раз

Я использую router.isActiveRoute для определения того, какой маршрут активен. В первый раз, когда я направляюсь в home link или menu link, маршрут изменяется, но активный класс не добавляется. active class добавляется при втором щелчке.

Я думаю, что это ошибка в директиве Router в angular2. Пожалуйста, скажите мне, почему и как это исправить?

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>

Спасибо

Ответ 1

Решение легко. Перемещение angular2 -polyfills.js ниже тега system.js script сделало трюк. Это известный вопрос # 6140. Существует также демонстрационная ссылка.

@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

Если вы используете Angular 4+, вы должны использовать директиву routerLinkActive="active" вместо любых других сложных процедур, чтобы определить, что является активным маршрутом, когда текущий маршрут неизвестен.

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a title="Contact Us" class="nav-link " routerLink="/contact-us">Contact</a>
      </li>