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

Antworten auf die Frage(6)

Ihre Antwort auf die Frage