ngClass在角度4中不起作用

Question

ngClass指令生成以下错误

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

Answer 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>

例如，要针对布尔类属性进行评估，以有条件地应用＆＃34; active＆＃34; CSS类：

<强> TS：

export class App {
  foo: boolean = true;
}

<强> HTML：

<div [class.active]="foo">Foobar</div>

以下是展示行动功能的plunker。

注意：如果您尝试应用某种与路由器相关的活动样式，则可以使用RouterLinkActive绑定。以下示例将应用CSS类＆＃34; active＆＃34;当用户激活了路径＆＃34; /英雄＆＃34;。

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

希望这有帮助！