curso - ¿Cómo usar @HostBinding con las propiedades de @Input en Angular 2?

angular wikipedia

Question

(Angular 2 RC4)

Con @HostBinding deberíamos poder modificar las propiedades del host, ¿verdad? Mi pregunta es, ¿esto se aplica también a las propiedades @Input () y, de ser así, cuál es el uso correcto? Si no, ¿hay otra manera de lograr esto?

Hice un Plunker aquí para ilustrar mi problema: https://embed.plnkr.co/kQEKbT/

Supongamos que tengo un componente personalizado:

@Component({
selector: ''custom-img'',
template: `
<img src="{{src}}">
`
})
export class CustomImgComponent {
@Input() src: string;
}

Y quiero alimentar la propiedad src con una directiva de atributo:

@Directive({
selector: ''[srcKey]''
})
export class SrcKeyDirective implements OnChanges {
@Input() srcKey: string;
@HostBinding() src;
ngOnChanges() {
this.src = `https://www.google.com.mt/images/branding/googlelogo/2x/${this.srcKey}_color_272x92dp.png`;
}
}

¿Por qué esta directiva no puede cambiar la propiedad de entrada [src] del componente personalizado?

@Component({
selector: ''my-app'',
directives: [CustomImgComponent, SrcKeyDirective],
template: `<custom-img [srcKey]="imageKey"></custom-img>`
})
export class AppComponent {
imageKey = "googlelogo";
}

¡Gracias!

Answer 1

Necesitas combinar los decoradores así:

@HostBinding(''class.active'') @Input() active: boolean = false;

Answer 2

Si su @Input es un objeto, puede hacer:

@Input() settings: Settings;
@HostBinding(''class.active'')
public get isActive(): boolean {
return this.settings.isActive;
}

Answer 3

@HostBinding() no crea enlaces de propiedad a las propiedades del componente host. Eso podría valer un informe de error, aunque ;-)

Lo tengo funcionando por una solución alternativa con exportAs y una variable de plantilla, pero eso es bastante feo. https://plnkr.co/edit/TobNVn?p=preview

Después de algunas consideraciones, creo que debería funcionar. De lo contrario no sabría lo que @HostBinding() src; haría en absoluto

@HostBinding(''attr.src'') src; o @HostBinding(''class.src'') src; Son los casos más comunes.