angular - 条件@HostBinding 取决于@Input()

Question

我正在尝试将 CSS 类 foo 绑定(bind)到我的主机组件，使用 @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() {
        }
    }