ngClass未在角度4
问题描述:
ngClass指令工作产生以下错误ngClass未在角度4
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'li'.
代码段。
<li [ngClass]="{'active':true}"><a href="">Home</a></li>
注:我已经导入通用模块
import {CommonModule} from "@angular/common"
库版本4.0.1角
答
由于@Nedim建议,如果你是一个功能模块中使用[ngClass]
,你会需要确保CommonModule
正被添加到imports: []
阵列属性@NgModule({})
:
import {CommonModule} from "@angular/common"
@NgModule({
imports: [CommonModule]
})
export class SomeModule {}
有条件地添加一个基于布尔值/表达式的类我建议您使用语法[class.someClass]="condition"
。这里是Class binding的文档。
<li [class.active]="true"><a href="">Home</a></li>
例如,要评估对一个布尔类属性按条件申请 “激活” CSS类:
TS:
export class App {
foo: boolean = true;
}
HTML:
<div [class.active]="foo">Foobar</div>
这是一个plunker演示功能的行动。
注:如果你正在尝试应用一些类型相关的路由器主造型,你可以使用RouterLinkActive结合。以下示例将在用户激活路径“/ heroes”时应用CSS类“active”。
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
希望有帮助!
+0
我想可能是因为没有将'CommonModule'添加到正在使用'[ngClass]'的要素模块的'imports:[]'中。我已更新回答建议增加。可能需要@Binson的更多信息。 –
您是否包含该模块以及app.module import部分? –
如果根模块下的组件确保导入BrowserModule。如果它在一个子模块中导入CommonModule。当尝试使用通用指令时,缺少这些导入会导致错误。 –