我可以在具有动态创建内容的下拉组件上找到很多问答，如下所示:
<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 内容都是他们自己的观点的组成部分......
最佳答案
您可以使用内容投影(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>
关于javascript - Angular 2 下拉指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41676801/