Угловые 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

Вы можете использовать Content Проекции (Угловое 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>