Question

我可以在下拉组件中找到许多Q＆amp; As，其中包含动态创建的内容，如下所示： <dropdown (items)="some.items" [click]="doSomething($event)" etc... />

我需要一个更通用且可重用的指令，允许下拉列表包含任何逻辑/模板。类似的东西：

<dropdown>
   <button class="dropdown-toggle">Toggle Dropdown!</button>
   <something class="dropdown-content">This is the dropdown content...</button>
</dropdown>

该指令需要提供逻辑来处理元素隐藏/显示切换和文档点击（不在元素上）以隐藏下拉列表。解决这个问题的最佳方法是什么？我所做的所有Angular 2的内容都是他们自己的观点......

Answer 1

您可以使用内容投影（Angular 1 Transclusion）来实现此目的：

<dropdown>
   <h1>This is a Content Projection!</h1>
</dropdown>

在DropdownComponent的模板中：

<div class="dropdown">
    <ng-content></ng-content>

    <p>Beside the projected content, dropdown can have its own content..</p>
</div>

结果将如下：

<h1>This is a Content Projection!</h1>
<p>Beside the projected content, dropdown can have its own content..</p>

Angular 2下拉指令

1 个答案: