角2下拉指令

Question

我可以找到很多Q &的作爲具有動態創建的內容，這樣的下拉組件： <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> 

該指令需要提供邏輯來處理元素隱藏/顯示切換和文檔點擊（不在元素上）來隱藏下拉菜單。解決這個問題的最好方法是什麼？所有2角的東西，我所做的就是這部分自己的看法......

Answer 1

您可以使用內容投影（角1包含）用於這一目的：

<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>