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

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

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

我希望能够在ng-content中使用contentToggle(),以便我可以使用其他元素来关闭下拉列表,例如我可能需要一个关闭按钮…这是什么最好的办法吗？

解决方法:

这样就可以了：

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

您只需将一个本地模板变量分配给组件,即可访问组件中的所有内容.包括您要调用的功能.

请注意,您应该/还需要将选择位更改为：

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