组件装饰器的宿主属性中的 ngClass 不起作用

问题描述

我创建了以下简单的示例组件，它使用 @Component 装饰器的 host 属性向组件 DOM 元素添加了一些属性和侦听器.在我的情况下 [ngClass] 没有效果.有人知道原因和解决方法吗?

I created the following simple example component that adds some attributes and listener to the component DOM element using the host property of the @Component decorator. In my case [ngClass] is has no effect. Does someone know why and how to fix it?

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.

I'm using Angular 2.0.0-beta.7.

推荐答案

ngClass 是一个指令，不能在主机绑定中使用.主机绑定仅支持

ngClass is a directive and can't be used in host bindings. Host bindings only supports

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

• property '[propName]':'expr'
• attribute '[attr.attrName]':'expr'
• event (event)="someFunction(event);otherExpr",
• style [style.width]="booleanExpr"
• class [class.className]="booleanExpr" binding.
• class [class]="expr" where expr is a string with space separated classes

这篇关于组件装饰器的宿主属性中的 ngClass 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！