Question

例如，我正在Angular2中开发一个多选控件，其功能类似于Select2或其他众多控件。

我首先定义了我希望用户界面在定义下拉列表中包含的内容时的外观，并提出了两个选项。

一种方法是使用@Input() s作为选项：

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

...然后在my-multi-select的模板中

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

Ahother将使用翻译，这就是material2出现的方式：

<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。我可以尝试找出一种方法来通知my-select my-option中发生的事情，例如使用Observable，或深入挖掘使用@Output事件 - - 当@Input变量可能更简单时，感觉就像试图将方形钉子塞进一个圆孔中。

这引出了我的问题，这里的翻译是否合适？还有一个更大的问题，什么时候是适当的转换，什么时候用一个方形的钉子插入一个圆孔呢？

Answer 1

对于您的示例，比较两个aproaches很简单，因为您只包含一个文本项作为转换的一部分。这使得使用Client number Address Premium 0 1 Building5, Street 30,NY 1000 1 2 Building7, Street 10,NY 1000 2 3 Building 7, Street 10,NY 1000变得微不足道，可能是最好的解决方案。

但是，假设您希望在子组件中包含多个元素，每个元素都包含自定义HTML标记。使用trasnclusion这是微不足道的，但使用@Input()它需要一些“hacks”才能正确使用，并且不能维护或扩展。

<强>解释

在此Todd Motto blog about transclusion作为参考的基础上，我们可以利用翻译为@Input()和title部分提供更复杂的HTML而不会出现问题。

Transculsion Parent

content

Transclusion Child

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

现在想象一下这个场景只使用<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>

Answer 2

这引出了我的问题，这里的翻译是否合适？

如果想要html看起来像：

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

my-multi-select和my-option是组件， transclusion是的方式。

什么时候适当的翻译？

2 个答案: