3

私がやろうとしていること:

  • 単一のディレクティブを使用する複数の異なるコンポーネント
  • ディレクティブが呼び出されるとき、ディレクティブが呼び出される親/ホスト コンポーネントを取得できる必要があります。

Plnkr -> http://plnkr.co/edit/Do4qYfDLtarRQQEBphW3?p=preview

angular.io のドキュメントを見ると、コンストラクターで親コンポーネントを取得するために「インジェクター」を使用できることがわかりました。

constructor(private el: ElementRef, private hostComponent:Injector){
    el.nativeElement.draggable = 'true';
}

そうすることで、Injector Object を取得します。私が言えることから、私はそれを使用することになっています

this.hostComponent.get(INJECTORTOKEN)

私が把握するのが難しい問題は、Angular で提供されている例では、トークンで提供するコンポーネントのタイプを知っていると仮定していることです。すなわち:

this.hostComponent.get(Image);
this.hostComponent.get(Box);

pnkr の例では、テンプレートに 2 つのコンポーネントがあります。

<div>
   <h2>Hello {{name}}</h2>
   <my-image></my-image> <!-- Uses the "My Directive" -->
   <my-box></my-box> <!-- Uses the "My Directive" -->
</div>

私の質問は、「mydirective.ts」にあります。親が「my-image」コンポーネントか「my-box」コンポーネントかがわからない場合、「injector.get()」をどのように活用できますか。

提供されているサンプルでは、​​ディレクティブは「ondrag()」でトリガーされます。ログ メッセージについては、コンソールを表示します。

どんな支援も感謝しています。

よろしくお願いします。

4

1 に答える 1

5

私はそれを行ういくつかの方法を知っています：

1) クラスインターフェースで親を見つける

次のようなプロバイダーのクラス インターフェイス トークンが必要です。

export abstract class Parent { }

その後Box、Imageコンポーネントにエイリアスプロバイダーを記述する必要があります

box.ts

providers: [{ provide: Parent, useExisting: forwardRef(() => Box) }]

image.ts

providers: [{ provide: Parent, useExisting: forwardRef(() => Image) }]

次に、以下に示すようにディレクティブで使用します

myDirective.ts

export class MyDirective {
  constructor(@Optional() private parent: Parent){}

  @HostListener('dragstart',['$event']) ondragstart(event){
    switch(this.parent.constructor) {
     case Box:
      console.log('This is Box');
      break;
     case Image:
      console.log('This is Image');
      break;
    }
  }
}

プランカーはこちら

2) すべての親をOptionalトークンとして注入する

myDirective.ts

export class MyDirective {
  constructor(
    @Optional() private image: Image, 
    @Optional() private box: Box){}

    @HostListener('dragstart',['$event']) ondragstart(event){
      if(this.box) {
        console.log('This is Box');
      }
      if(this.image) {
        console.log('This is Image');
    }
  }
}

この場合のプランカー

3)Injectorのように使う

export class MyDirective {
  constructor(private injector: Injector){}

  @HostListener('dragstart',['$event']) ondragstart(event){
    const boxComp = this.injector.get(Box, 0);
    const imageComp = this.injector.get(Image, 0);

    if(boxComp) {
      console.log('This is Box');
    }
    if(imageComp) {
      console.log('This is Image');
    }
  }
}

プランカー

于 2016-10-12T06:47:45.273 に答える