Angular 2 在事件发出时调用函数/方法

我有一个组件，当单击关闭按钮时可以从页面中删除该组件。我曾曝光过一个testClose用户可以注册以在组件关闭时执行某些操作的事件。如何注册该事件以在组件关闭时调用函数？例如，我想在 TestComponent 关闭时将 closeCounter 加 1。这是 plnkr：

https://plnkr.co/edit/iGyzIkUQOTCGwaDqr8o0?p=preview 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 的关闭事件以调用某些函数。

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++;
  }

}

只需为正在发出的事件添加一个侦听器

(testCloseChange)="onTestCloseChange($event)"

所以应用程序组件模板将如下所示

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

在 App 组件类中，您应该定义 onTestCloseChange

export class AppComponent{

  onTestCloseChange(event) {

  }

}