締め切りはいつ適切ですか？

Question

例を挙げると、Select2や他の多数のコントロールと機能的に似ている、Angular2のマルチセレクトコントロールを開発しています。

私は、ユーザーインターフェイスがドロップダウンに含まれているものの定義の面で見えるようにしたいものを定義することによって開始され、二つのオプションを思い付きました。

一つはオプションのため@Input() Sを使用することです：

<div class=option" *ngFor="let option of options">{{option.display}}</div> 

Ahotherは、トランスクルーを使用することで、どのようにmaterial2表示されます：

<my-multi-select [options]="options"></my-multi-select> 

...そしてmy-multi-select用テンプレート内それを行うには：

<my-multi-select> 
    <my-option *ngFor="let option of options" [value]="option"></my-option> 
</my-multi-select> 

... my-multi-select用テンプレート内：

<div class=select-container"> 
    <ng-content select="my-option"></ng-content> 
</div> 

私はトランスクルーオプション付きの内容だったが、その後、私は実際にmy-optionからmy-multi-selectに来るイベントを結合困難にしてそれにランドを実装するために始めたとき。 Observableのように、my-optionで起こっていることをmy-selectに通知する方法や、@Outputイベントを使用して詳細に調べる方法を見つけようとしますが、丸い穴に四角いペグを詰め込むように感じています@Inputの変数がちょっと単純かもしれません。

これは私に質問につながりました、ここでも適切な結びつきがありますか？そして、より大きな疑問は、いつ転位が適切であるか、そしていつ丸みのある穴に四角形のペグを挟み込んでトランジションを使用しているのでしょうか？

Answer 1

これは質問に私を導いたが、ここでも適切なトランスクルーのですか？

<my-multi-select> 
    <my-option *ngFor="let option of options" [value]="option"></my-option> 
</my-multi-select> 

どこmy-multi-selectとmy-optionがトランスクルーがそれを行うには方法あり、その後、コンポーネントです：

は場合のように、HTMLを見てみたいです。

Answer 2

あなたの例では、2つのaproachesを比較するのは簡単です。なぜなら、あなたは1つのテキスト項目だけをトランジションの一部として含めているからです。これにより、@Input()を使用することが簡単になり、最適なソリューションになる可能性があります。

しかし、あなたは、あなたの子コンポーネントに乗るために沿ってカスタムHTMLタグでそれぞれを含める複数の要素を持っているシナリオを想像してみてください。 trasnclusionを使用するとこれは簡単ですが、@Input()を使用すると、少しだけ"ハッキング"が必要になり、あまり保守性がありません。

---

説明リファレンスとしてこのTodd Motto blog about transclusionからのビルド

、我々は問題なく、私たちtitleとcontentセクションのためのより複雑なHTMLを持っているトランスクルーを利用することができます。

Transculsion親

​​

トランスクルー子供

<div class="my-component"> 
    <div> 
     Title: 
     <ng-content select="my-title"></ng-content> 
    </div> 
    <div> 
     Content: 
     <ng-content select="my-content"></ng-content> 
    </div> 
</div> 

は今私達の要素を宣言するだけ@Input()を使用して、この同じシナリオを想像してみてください。

親からのバインディングはそれほど親切ではありませんが、もっと複雑なシナリオではこれをやりたくありません。

私たちの子コンポーネントでは、Angularの補間エンコーディングを回避するために[innerHTML]を使用する必要があります。繰り返しますが、これは拡張や維持が非常に容易ではありません。これは、私の意見では、移籍が本当に優れているところです。

入力親

<my-component 
    [my-title]="<h1>This is the Component title!</h1>" 
    [my-content]="And here's some awesome content.<ul><li>First</li><li>Second</li></ul>"> 
</my-component> 

入力託児

<div class="my-component"> 
    <div [innerhtml]="'Title:' + my-title"></div> 
    <div [innerhtml]="'Content:' + my-content"></div> 
</div>