什么时候合适？

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>