Angular2例外:主机内的ngClass，“不是已知的本机属性" [英] Angular2 Exception: ngClass within a Host, "isn't a known native property"

问题描述

是否可以在主机内将"ngClass"用于组件/指令.

Is it possible to use "ngClass" within the host for a component/directive.

    @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上正常工作..它添加了一个自定义"类，但是在尝试将过孔添加到主机时抛出了异常.

In the above example the ngClass works correctly on the div in the template.. it get's a "custom" class added, but it throws an exception when trying to add via to the Host.

由于它不是已知的本机属性，因此无法绑定到'ngClass'"

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

直接在主机中设置类，例如，

Setting the class in the host directly works fine e.g.;

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

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

Therefore would think ngClass would be ok? Incorrect syntax? (likely!!!) : )

推荐答案

ngClass 是指令，主机绑定中不支持该指令.

ngClass is a directive and directives are not supported in host bindings.

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

需要为

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

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

where classNames is a space separated list of classes.

这篇关于Angular2例外:主机内的ngClass，“不是已知的本机属性"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！