Angular 2:TypeError:无法读取未定义的属性“isRouteActive”
Posted
技术标签:
【中文标题】Angular 2:TypeError:无法读取未定义的属性“isRouteActive”【英文标题】:Angular 2: TypeError: Cannot read property 'isRouteActive' of undefined in 【发布时间】:2016-06-23 07:41:38 【问题描述】:我正在尝试使用isRouteActive
函数在单击其中包含的链接时切换li
元素的active
类,但它不断给我类似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”,但它们都不起作用。错误可能与什么有关?以及如何实际调试这种情况?
【问题讨论】:
【参考方案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。
【讨论】:
【参考方案2】:我会按照Angular 2: How to determine active route with parameters? 中的建议在<a>
元素上使用router-link-active
。
干杯,
大卫
【讨论】:
以上是关于Angular 2:TypeError:无法读取未定义的属性“isRouteActive”的主要内容,如果未能解决你的问题,请参考以下文章
Angular 6 TypeError:无法读取未定义的属性(读取“长度”)错误
Angular 6:TypeError:无法读取未定义的属性“值”
Angular,TypeError:无法读取未定义的属性“排序”
Angular 13 Webpack 异常:TypeError:无法读取未定义的属性(读取“NODE_DEBUG”)