Como usar @HostBinding com propriedades @Input no Angular 2?
(Angular 2 RC4)
Com@HostBinding devemos poder modificar as propriedades do host, certo? Minha pergunta é: isso também se aplica às propriedades @Input () e, em caso afirmativo, qual é o uso correto? Caso contrário, existe outra maneira de conseguir isso?
Eu fiz um Plunker aqui para ilustrar meu problema:https://embed.plnkr.co/kQEKbT/
Suponha que eu tenha um componente personalizado:
@Component({
selector: 'custom-img',
template: `
<img src="{{src}}">
`
})
export class CustomImgComponent {
@Input() src: string;
}
E eu quero alimentar a propriedade src com uma diretiva 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 que essa diretiva não pode alterar a propriedade de entrada [src] do componente personalizado?
@Component({
selector: 'my-app',
directives: [CustomImgComponent, SrcKeyDirective],
template: `<custom-img [srcKey]="imageKey"></custom-img>`
})
export class AppComponent {
imageKey = "googlelogo";
}
Obrigado!