Angular 2: TypeError: Cannot read property 'isRouteActive' of undefined in
Angular 2: TypeError: Cannot read property 'isRouteActive' of undefined in
我正在尝试使用 isRouteActive
函数通过单击其中包含的链接来切换 li
元素的 active
class,但它一直给我像 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”、“./Home”,'Home' 但其中 none 行得通。错误可能与什么有关?以及如何实际调试这种情况?
刚刚发布了问题,终于找到了答案:忘记输入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。
我会按照 中的建议在 <a>
元素上使用 router-link-active
。
干杯,
大卫
我正在尝试使用 isRouteActive
函数通过单击其中包含的链接来切换 li
元素的 active
class,但它一直给我像 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”、“./Home”,'Home' 但其中 none 行得通。错误可能与什么有关?以及如何实际调试这种情况?
刚刚发布了问题,终于找到了答案:忘记输入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。
我会按照 <a>
元素上使用 router-link-active
。
干杯,
大卫