Angular 2使函数在ng-content中可用

Question

我有一个这样的模板的下拉列表：

<div class="dropdown-trigger" (click)="contentToggle()">
     <ng-content select="dropdown-trigger"></ng-content>
</div>
<div class="dropdown-content" *ngIf="showContent">
     <ng-content select="dropdown-content"></ng-content>
</div>

我希望能够在输入的内容中使用contentToggle()，ng-content以便可以使用其他元素来关闭下拉菜单，例如，我可能需要关闭按钮...最好的方法是什么？

Answer 1

这将达到目的：

<dropdown #dropdown>
  <button dropdownTrigger (click)="dropdown.toggleDropdown()">Click me</button>
</dropdown>

您只需为该组件分配一个本地模板变量，就可以访问该组件中包含的所有内容。包括您要调用的函数。

请注意，您还应该/需要将这些select位更改为：

<ng-content select="[dropdownTrigger]"></ng-content>
<ng-content select="[dropdownContent]"></ng-content>