angular - @HostBinding condițional în funcție de @Input()
Încerc să atașez clasa CSS foo componentului meu gazdă, folosind @HostBinding în funcție de un test pe care îl fac pe o variabilă dinamică. Dar nu reușesc să fac să funcționeze corect.
Iată ce am încercat deja:
export class MyComponent {
@Input()
public input: string;
@HostBinding('class.foo')
public isFoo: Boolean = this.inputIsCorrect();
constructor() {
}
private inputIsCorrect(){
return (this.input != 'not correct');
}
}
Cum aș putea să fac să funcționeze? Poate mă gândeam la o modalitate de a asculta schimbările input?
Răspuns #1
Încearcă în acest fel. Creează un getter/setter pentru proprietatea @Input și setează isFoo din 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() {
}
}
Răspunsul #2
Ceea ce ai făcut este aproape corect :
export class MyComponent {
@Input()
public input: string;
@HostBinding('class.foo')
public get isFoo(): Boolean {
return this.input !== 'not correct';
}
}
