角2は、イベントが発生したときに関数/メソッドを呼び出す

Question

閉じるボタンをクリックしたときにページから削除できるコンポーネントがあります。私はtestCloseイベントを公開しました。これは、コンポーネントが閉じられたときにユーザーが何らかの作業を行うために登録できるイベントです。コンポーネントが閉じられたときに関数を呼び出すには、そのイベントにどのように登録すればよいですか？たとえば、TestComponentが閉じられたときにcloseCounterを1増やしたいとします。イベントを公開し

https://plnkr.co/edit/iGyzIkUQOTCGwaDqr8o0?p=preview

TestComponent：

import {Component, Input, Output, EventEmitter} from 'angular2/core'; 

@Component({ 
    selector: 'test', 
    template: ` 
     <div class="box" *ngIf="!_close"> 
     <button class="close" (click)="close()">x</button> 
     </div> 
    `, 
    styles:[ 
     ` 
     .box{ 
      background: yellow; 
      height: 100px; 
      width: 100px; 
     } 
     ` 
    ] 
}) 
export class TestComponent{ 

    @Input("testClose") _close = false; 
    @Output("testCloseChange") _closeChange = new EventEmitter<boolean>(false); 

    close(): void{ 
    this._close = true; 
    this._closeChange.emit(true); 
    } 

    open(): void{ 
    this._close = false; 
    this._closeChange.emit(true); 
    } 

} 

アプリケーションコンポーネントのいくつかの機能を呼び出すためにTestComponentのクローズイベントに登録する必要があります。ここplnkrです。

import {Component} from 'angular2/core'; 
import {TestComponent} from './test.component'; 

@Component({ 
    selector: "my-app", 
    template: ` 
     <div class="container"> 
     <test [testClose]="isClose"></test> 
     Close Count: {{closeCount}} 
     </div> 
    `, 
    directives: [TestComponent] 
}) 
export class AppComponent{ 

    isClose: boolean = false; 
    closeCount: number = 0; 

    incrementClose(): void{ 
    this.closeCount++; 
    } 

} 

Answer 1

ちょうどそうアプリのコンポーネントのテンプレートは、この

<div class="container"> 
    <test [testClose]="isClose" (testCloseChange)="onTestCloseChange($event)"></test> 
    Close Count: {{closeCount}} 
</div> 

のようになります。そして、アプリケーションコンポーネントクラスの内部で使用すると、onTestCloseChange

を定義する必要があります

(testCloseChange)="onTestCloseChange($event)" 

を放出されているイベントにリスナーを追加

export class AppComponent{ 

    onTestCloseChange(event) { 

    } 

}