Question

问题可能听起来很愚蠢（因为我相信答案是显而易见的）......但我正在尝试使用foo将CSS类@HostBinding绑定到我的主机组件，具体取决于我对动态变量进行的测试。但无法使其正常工作。这是我已经尝试过的（代码基本上说明了我正在尝试做的事情）：

export class MyComponent {
    @Input()
    public input: string;

    @HostBinding('class.foo')
    public isFoo: Boolean = this.inputIsCorrect();

    constructor() {
    }

    private inputIsCorrect(){
        return (this.input != 'not correct');
    }
}

知道如何让它发挥作用吗？我可能正在考虑听取input变化的方法吗？

感谢您的帮助！

Answer 1

试试这种方式。设置@Input属性getter / setter并从setter设置isFoo。

export class MyComponent {   
     @Input()
        public get input (): string {
          return this._input;
        }
        public set input (val: string) {
          this._input = val;
          // when the input is set check it and set isFoo;
          this.isFoo = (val != 'not correct');
        }

        @HostBinding('class.foo')
        public isFoo: Boolean = false; // false is init value

        constructor() {
        }
    }

Answer 2

你所做的几乎是正确的：

export class MyComponent {
    @Input()
    public input: string;

    @HostBinding('class.foo')
    public get isFoo(): Boolean {
        return this.input !== 'not correct';
    }

}

条件@HostBinding取决于@Input（）

2 个答案: