角度2メイク機能

Question

私はこのようなテンプレートを使用してドロップダウン持っている：私は私ができるように、私はng-contentに入れて何にcontentToggle()を使用できるようにしたいと思い

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

をドロップダウンを閉じるために使用できる追加の要素があります。たとえば、閉じるボタンが必要な場合があります。これを行うにはどうすればよいですか？あなたは、私はこれはトリックを行いますOutput Decorator

Answer 1

を読んですることをお勧めいたしますイベントにコールバックを取得したい場合は

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> 

：

Answer 2

角度は、あなたがこのトリック、例を行うことができ

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

ローカルテンプレート変数をコンポーネントに割り当てるだけで、コンポーネントに含まれているすべてのものにアクセスできるようになります。呼び出す機能を含む。あなたは/もこれにselectビットを変更する必要があるの

注：

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