什麼時候合適？

Question

舉例說明，我正在開發Angular2中的多選控件，功能類似於Select2或多種其他控件。

我首先定義了我希望用戶界面看起來像是在定義下拉列表中包含的內容，並提出了兩個選項。

一種是使用@Input() S爲選項：

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

Ahother是使用transclusion，該是多麼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> 

我含量與transclusion選項，但後來當我開始真正實現它蘭特難易結合來從my-option到my-multi-select的事件。我可以嘗試找出一種方法來通知my-select發生在my-option中的事情，比如使用Observable，或者深入挖掘以使用@Output事件 - 但這就像試圖將一個方形釘塞入圓孔當@Input變量可能會更簡單。

這引起了我的問題，在這裏甚至是合適的？還有一個更大的問題，什麼時候合適的話，以及什麼時候使用阻塞堵塞一個方形釘到圓孔？

Answer 1

這引出了我的問題，在這裏是否合適？

如果想HTML看起來像：

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

凡my-multi-select和my-option是組件，然後transclusion是做的方式。

Answer 2

對於您的示例，比較兩種方法非常簡單，因爲您只包括一個文本項目作爲跨部分的一部分。這使得使用@Input()瑣碎，可能是最好的解決方案。

然而，假設你有一個場景，你想在你的子組件中包含多個元素，每個元素都帶有自定義的HTML標籤。使用trasnclusion這是微不足道的，但使用@Input()它需要幾個「黑客」得到正確的，並不是很可維護或可擴展。

---

說明

從這個Todd Motto blog about transclusion作爲參考號樓上，我們可以利用transclusion有我們title和content部分更復雜的HTML沒有問題。

Transculsion家長

​​

Transclusion兒童

<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()來聲明元素此相同的情況。

我們從父母的綁定不是很友好，我們絕對不想爲更復雜的情況做到這一點。

在我們的子組件中，我們必須使用[innerHTML]繞過Angular的插值編碼。再一次，這不是很容易擴展或維護。在我看來，這是跨越真正優秀的地方。

輸入父

<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>