角2化妆功能

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> 

Answer 2

角让你做这一招，例如：

import { Component } from '@angular/core' 

@Component(){...} 
export class DropdownComponent { 
    toggleDropdown() {...} 
} 

//parent.component.html 
<dropdown-content #myDropdown> 
    <a (click)="myDropdown.toggleDropdown()">Close the dropdown</a> 
</dropdown-content> 

如果你想获得一个回调的情况下，我建议你阅读Output Decorator