¿Cómo usar @HostBinding con las propiedades @Input en Angular 2?
(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 forma 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!