我有一个带有这样的模板的下拉列表:
<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>