Angular 2下拉指令-Java 学习之路

我可以在下拉组件上找到大量有关动态创建内容的问答，如下所示： <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的东西都是他们自己观点的组成部分......

1 回答

您可以使用 Content Projection （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>

回复于 2024-04-20T18:29:48+08:00

Angular 2下拉指令

1 回答

相关问题