A

src/app/components/contains/contain1.ts

import { Component,Output ,EventEmitter} from '@angular/core';

@Component({

selector: 'contain1',

template: `

<div>

  <h3> contain1 </h3>

  <div (click)="onChecked()" >

    <button value="123"></button>

  </div>

</div>

`})

export class Contain1 {

note = 'EventEmitter test'

@Output() checked = new EventEmitter();

onChecked(){

  this.checked.next("next:"+this.note);  //过时  

  this.checked.emit("emit:"+this.note);

}}

B

src/app/app.component.ts

import { Component } from '@angular/core';

import '../../public/css/styles.css';

import { Contain1,Contain2 } from './components/contains'

@Component({

selector: 'my-app',

directives:[    Contain1,Contain2  ],

template:`

  <contain1 (checked)="showChecked($event)"></contain1>  

  <contain2></contain2>    `,

styles: [require('./app.component.css')]})

export class AppComponent {

  showChecked(note:String){

     console.log(note);

 }}

说明

A :

• @Outpout 定义一个输出
• onChecked(), A 中的自定义方法，通过emit，触发@Outpout

B: 使用 A 中定义的 @Output（），$event 必须，$event 是B 中通过emit 传过来的。