Angular 4のコンポーネントに属性ディレクティブを適用

Question

@Input()バインドプロパティsrcを持つimg-popコンポーネントを作成しました。 @HostBinding()プロパティsrcを持つauthSrcディレクティブを作成しました。

@Component({ 
selector: 'img-pop', 

template: `<img [src]="src"/> 
      <div *ngIf="isShow"> 
       <----extra value-----> 
      </div>` 
}) 

export class ImgPopOverComponent implements OnInit { 

@Input() 
private src; 

private isShow=false; 

@HostListener('mouseenter') onMouseEnter() { 
    this.isShow= true; 
} 

@HostListener('mouseleave') onMouseLeave() { 
    this.isShow= false; 
} 

} 

このような指示があります。

@Directive({ selector: '[authSrc]' }) 
export class AuthSrcDirective implements OnInit { 

@HostBinding() 
private src: string; 

constructor(private element: ElementRef) { } 

ngOnInit() { } 

    @Input() 
    set authSrc(src) { 
    this.src = src+"?access_token=<-token->"; 
    } 
} 

私は両方の機能を1つのように組み合わせたいと思っています。

<img-pop [authSrc]="/api/url/to/image"></img-pop> 

最終URL呼び出しは/画像に//API/URLになるように、access_tokenは= < --token - ？>

が、それはCan't bind to 'src' since it isn't a known property of 'img-pop'.エラー

plnkr link

をスローします私が概念的に間違っているなら、私を修正してください。

ありがとうございます。

Answer 1

this answerによれば、コアの貢献者は@HostBindingを使用してコンポーネントの直接プロパティを設定することはできません。 @HostBindingは常にDOMに直接バインドされます。これは設計によるものです。ここでの説明は次のとおり

意図したように、これはのように、動作：

同じ要素が一つ が他方を噴射することにより、直接通信よりも遅い に指示/コンポーネント間で通信するためにデータバインディングを使用して

• ディレクティブ間のバインディングは容易に サイクルにつながります。

だから、あなたの場合には、これは可能な解決策である：より一般的なアプローチについては

export class AuthSrcDirective { 
    // inject host component 
    constructor(private c: ImgPopOverComponent) { } 

    @Input() 
    set authSrc(src) { 
     // write the property directly 
     this.c.src = src + "?access_token=<-token->"; 
    } 
} 

、thisを参照してください。

Answer 2

ディレクティブは、コンポーネントテンプレートに静的に追加されるHTMLと一致するセレクタに対してのみインスタンス化されます。
エレメントからディレクティブを動的に追加/削除する方法はありません。唯一の方法は、要素全体を追加/削除することです（たとえば、*ngIf