web-dev-qa-db-ja.com

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

@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/to/image？access_token = <-token->になります。

しかし、それはCan't bind to 'src' since it isn't a known property of 'img-pop'.エラーをスローします

plnkrリンク

概念が間違っている場合は訂正してください。

ありがとうございました。

angularangular2-directivesangular-componentsangular2-hostbinding
7
Naveen raj

この回答 によると、コアコントリビューターによると、@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 を参照してください。

3
Maxim Koretskyi

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

1
Günter Zöchbauer