Angular2 异常 : ngClass within a Host, "isn' t 一个已知的原生属性”

Question

是否可以在主机中使用“ngClass”作为组件/指令。

    @Component({
        selector: 'custom',
        template: `<div [ngClass]="classMap"></div> // I work
        <ng-content></ng-content>`,
        host: {
            '[ngClass]' : 'classMap' // I don't work!!!
        }
    })
    export class CustomComponent {
        constructor () {
            this.classMap = {
                custom: true
            };
        }
    }

在上面的示例中，ngClass 在模板中的 div 上正常工作。它添加了一个“自定义”类，但在尝试将 via 添加到主机时抛出异常。

"Can't bind to 'ngClass' since it isn't a known native property"

直接在主机中设置类可以正常工作，例如；

host: {
    '[class.custom]' : 'classMap.custom'
}

因此会认为 ngClass 可以吗？语法不正确？ (可能!!!):)

Answer 1

ngClass 是指令，主机绑定(bind)不支持指令。

    host: {
        '[ngClass]' : 'classMap' // I don't work!!!
    }

需要

    host: {
        '[class.className]' : 'className', 
        '[class]' : 'classNames' 
    }

其中 classNames 是用空格分隔的类列表。