angular - 组件装饰器的主机属性中的 ngClass 不起作用

Question

我创建了以下简单示例组件，它使用 @Component 装饰器的主机属性向组件 DOM 元素添加了一些属性和监听器。在我的例子中 [ngClass] 是无效的。有人知道为什么以及如何解决它吗？

import { Injector, Component } from "angular2/core";
import { NgClass } from "angular2/common";
import { SelectionService } from "../selection-service";

@Component({
    selector: "my-component",
    template: `<div>inner template</div>`,
    host: {
        style: "background-color: yellow", // works
        "[ngClass]": "{'selected': isSelected}", // does not work
        "(mouseover)": "mouseOver($event)", // works
        "(mouseleave)": "mouseLeave($event)", // works
    },
    directives: [NgClass],
})
export class MyComponent {
    private isSelected = false;

    constructor(private selectionService: SelectionService) {
        this.selectionService.select$.subscribe((sel: Selection) => {
            this.isSelected = sel; // has no effect on ngClass
        });
    }

    mouseOver($event) {
        console.log("mouseOver works");
    }

    mouseLeave($event) {
        console.log("mouseLeave works");
    }
}

我正在使用 Angular 2.0.0-beta.7。

Answer 1

ngClass 是一个指令，不能在主机绑定(bind)中使用。主机绑定(bind)只支持

• 属性 '[propName]':'expr'
• 属性 '[attr.attrName]':'expr'
• 事件 (event)="someFunction(event);otherExpr",
• 样式 [style.width]="booleanExpr"
• 类 [class.className]="booleanExpr" 绑定(bind)。
• class [class]="expr" 其中 expr 是用空格分隔的类的字符串