Bedingte @HostBinding abhängig von @Input()

Question

Frage klingt vielleicht sehr albern (wie ich glaube, die Antwort ist offensichtlich) ... aber ich versuche, die CSS-Klasse foo an meine Host-Komponente zu binden, mit @HostBinding, abhängig Bei einem Test mache ich eine dynamische Variable. Aber es gelingt nicht, es richtig funktionieren zu lassen. Hier ist, was ich schon versucht (Code im Grunde zeigt, was ich versuche zu tun):

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

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

    constructor() { 
    } 

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

Jede Idee, wie ich konnte es funktioniert? Ich dachte vielleicht darüber nach, wie man die Änderungen von input hört?

Danke für Ihre Hilfe!

Answer 1

Versuchen Sie diesen Weg. Machen Sie @Input-Eigenschaft Getter/Setter und setzen Sie isFoo vom Setter.

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

Was Sie getan haben, ist fast richtig:

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

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

}