Wie verwende ich @HostBinding mit @Input-Eigenschaften in Angular 2?
(Winkel 2 RC4)
Mit@ HostBinding Wir sollten in der Lage sein, die Eigenschaften des Hosts zu ändern, oder? Meine Frage ist, gilt dies auch für @Input () -Eigenschaften und wenn ja, welche Verwendung ist die richtige? Wenn nicht, gibt es einen anderen Weg, dies zu erreichen?
Ich habe hier einen Plunker gemacht, um mein Problem zu veranschaulichen:https: //embed.plnkr.co/kQEKbT
Angenommen, ich habe eine benutzerdefinierte Komponente:
@Component({
selector: 'custom-img',
template: `
<img src="{{src}}">
`
})
export class CustomImgComponent {
@Input() src: string;
}
Und ich möchte die src -Eigenschaft mit einer Attribut-Direktive versorgen:
@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`;
}
}
Warum kann diese Anweisung die Eingabeeigenschaft [src] der benutzerdefinierten Komponente nicht ändern?
@Component({
selector: 'my-app',
directives: [CustomImgComponent, SrcKeyDirective],
template: `<custom-img [srcKey]="imageKey"></custom-img>`
})
export class AppComponent {
imageKey = "googlelogo";
}
Vielen Dank