Угловые 2: TypeError: Не удается прочитать свойство «isRouteActive» неопределенных в

Question

Я пытаюсь использовать isRouteActive функции, чтобы переключить active класс li элементов при нажатии ссылки, содержащейся в них, но он продолжает давать мне ошибки как TypeError: Cannot read property 'isRouteActive' of undefined in [isRouteActive(['./Home']) in AppComponent@6:16] , Файл выглядит следующим образом:

import {Component} from 'angular2/core'; 
import {ROUTER_DIRECTIVES, RouteConfig, Router } from 'angular2/router'; 
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common'; 
import {LoginComponent} from './login.component.js'; 
import {HomeComponent} from './home.component.js'; 

@Component({ 
selector: 'front-page-app', 
providers: [ FORM_PROVIDERS ], 
directives: [ ROUTER_DIRECTIVES, FORM_DIRECTIVES ], 
template: ` 
<div class="container"> 
    <div class="header clearfix"> 
    <nav> 
     <ul class="nav nav-pills pull-right"> 
     <li #homeLink role="presentation" 
      [class.active]="isRouteActive(['./Home'])"> 
     <a [routerLink]="['./Home']">Home</a> 
     </li> 
     <li #loginLink role="presentation" 
      [class.active]="isRouteActive(['./Login'])"> 
     <a [routerLink]="['./Login']">Login</a> 
     </li> 
     </ul> 
    </nav> 
    <h3 class="text-muted">Fomoapp</h3> 
    </div> 
</div> <!-- /container --> 
<router-outlet></router-outlet> 
` 
}) 

@RouteConfig([ 
{ path: '/login', component: LoginComponent, name: 'Login' }, 
{ path: '/home', component: HomeComponent, name: 'Home' }, 
{ path: '/', redirectTo: ['Home'] } 
]) 
export class AppComponent { 
public isRouteActive(route) { 
    return this.router.isRouteActive(this.router.generate(route)) 
} 
} 

Я пробовал различные пути, как '/ дома', '#/дома', '/ Home', './Home', 'Home', но ни один из они работают. С чем связана ошибка? И как фактически отлаживать такие ситуации?

Answer 1

Только что отправил вопрос и, наконец, нашел ответ: забыл поставить constructor и поставить Router в него. Таким образом, рабочая версия меняет export class Appcomponent часть и выглядит следующим образом:

export class AppComponent { 
    constructor(private router: Router) { 
    } 

    public isRouteActive(route) { 
     return this.router.isRouteActive(this.router.generate(route)) 
    } 
} 

Также см the link.

Answer 2

Я использовал бы router-link-active на элементе <a>, как предложено в Angular 2: How to determine active route with parameters?.

Cheers,

Дэвид