角度2：TypeError：无法读取中未定义的属性“Is RouteActive”

Question

我试图使用IsRouteActive函数在单击Li元素中包含的链接时切换这些元素的Active类，但它不断给我提供以下错误：TypeError：无法读取AppComponent@6:16]中[IsRouteActive(['./home'])中未定义的属性“Is RouteActive”。该文件如下所示：

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'、'./home'、'home'但都不起作用。这个错误可能与什么有关？以及如何实际调试此类情况？

Answer 1

只是贴出了问题，最后找到了答案：忘了放构造器和提供路由器在里面。因此，工作版本更改export class appcomponent部分，看起来如下：

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

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

另请参阅链接。