2つのディレクティブを1つにまとめる

Question

ディレクティブdir1とdir2という2つのディレクティブがあるとします（これらのディレクティブは、制御できないサードパーティのAPIによって提供されています）。のは、次のようにすることができ、これらはhtml要素に適用されるとしましょう：私は自分自身が私のコードでは、いくつかの場所で正確に同じ結合値を持つディレクティブ上記の適用を発見した

<div dir1="red" [dir2]="123">... My Content ...</div> 

。自分自身を繰り返すのではなく、私はこのように適用できること、myDirそれを呼び出す、私自身のカスタムディレクティブを作成したいと思います：

<div MyDir >... My Content ...</div> 

これは以前のようにdir1とdir2の適用など正確同じである必要があります上記の例では、そのクラス内に値"red"と123がハードコードされています。

私が持っている

ひとつのアイデアが唯一のtypescriptですが、多重継承を持っていた場合、その後、私は単純にMyDirクラスANを記述している..私は、次のplunkerの例のように、ホストのバインディングを設定しようとしたが、これは動作しません

Dir1とDir2の延長..私はカスタムディレクティブ（MyDir）、使用目的を達成するために書くことについてどのように行くのさ

私の質問？

親切に助けてください、 ありがとうございました！

https://plnkr.co/edit/W20Wvew326qsGfPU5H6v

Answer 1

（TL; DRはPlunker hereを参照してください）

以下上記のように、問題のために私の解決策になってしまったものです。これは最も一般的な解決策ではないことに注意してください。他のシナリオでは、適応性は、関係する命令のパブリックAPIの外観に大きく依存します。ディレクティブは、要素のスタイルを変更するための責任がある場合、これはうまくケースかもしれ

constructor(private elRef: ElementRef, /*...*/) { /*...*/ } 

：組み合わせるべきディレクティブは少なくともElementRefのような注射依存関係の1つとして持っているところそれはうまく動作するはずです。私は、私は単純にそうようDir1/Dir2のためのコンテキストとしてMyDirさんElementRefに渡す2 newDir1/Dir2オブジェクト作成された何をしたか

：

に

// inside MyDir constructor 
this.d1 = new Dir1(this.elRef, /*...*/); 
this.d2 = new Dir2(this.elRef, /*...*/); 

は、それから私は、パブリックプロパティ（@Inputバインディングを設定します）d1/d2の値私は永久に（自分自身を繰り返すことを避けるために）それらを必要としています：自分自身を繰り返すことを避けるために：

//inside MyDir constructor 
this.d1.dir1 = "red"; 
this.d2.dir2 = 123; 

次に、パブリックメソッドd1/d2をMyDirとマッチさせることは、後者の対応するメソッド内で前者のメソッドを呼び出すことでした。ここで

ngAfterContentInit() { 
    this.d1.ngAfterContentInit(); 
    this.d2.ngAfterContentInit(); 
} 

目標が追加されている他のディレクティブにつながる属性を追加するあなたのディレクティブは、これは動作しませんということであれば、このすべてつなぎ合わせ https://plnkr.co/edit/TCagW8vOPrqSiOT9Oztf