角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