角度2の@Inputプロパティで@HostBindingを使用するには？

Question

（角2 RC4）

@HostBindingでは、ホストのプロパティを変更できるはずです。私の質問は、これは@Input（）プロパティにも当てはまりますか？もしそうなら、正しい使い方は何ですか？そうでない場合は、これを達成する別の方法がありますか？

私は私の問題を示すために、ここではPlunkerを作っ：

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

そして、私は属性ディレクティブでsrcプロパティを養うたい：https://embed.plnkr.co/kQEKbT/

は、私はカスタムコンポーネントがあるとし

@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`; 
    } 
} 

このディレクティブは、カスタムコンポーネントの[src]入力プロパティを変更できないのはなぜですか？

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

ありがとう！

Answer 1

@HostBinding()は、ホストコンポーネントのプロパティへのプロパティバインディングを作成しません。しかし、バグレポートの価値があるかもしれません;-)

私はexportAsとテンプレート変数の回避策で動作していますが、それはかなり醜いです。 https://plnkr.co/edit/TobNVn?p=preview

何らかの考慮の後、私はそれがうまくいくと思います。そうでないと、@HostBinding() src;が何をするのか分かりません。

@HostBinding('attr.src') src;または@HostBinding('class.src') src;がより一般的です。

Answer 2

あなたはこのようなデコレータを結合する必要があります。

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

Answer 3

あなた@Inputがオブジェクトである場合は、あなたが行うことができます：

@Input() settings: Settings; 

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