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

score 8 · Accepted Answer

正如@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>

1 回答 1