组件间传值之@Output

对应@input输入传值，也有@Output输出传值。
输入传值请我之前写的一篇文章：https://www.jianshu.com/p/686294cb2b29

例如：
A是B的父组件，B中有Input参数how,A中调用B组件，并传入[Import]参数。B根据传入的Import参数，发射返回相应的数据。

//A页面代码
    <table class="table table-bordered">
      <tbody>
      <tr>
       ......
      </tr>
      <tr *ngFor="let item of tasks|filter:'title':keyword;let i=index">
        ......
        <td>
          <app-jinji [Import]="item.jinji" (Export)="print($event)"></app-jinji>
        </td>
       ......
      </tr>
      </tbody>
    </table>

//A中ts代码，定义print方法
......
  print(data) {
    console.log(data);
  }
......

//B中ts代码
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-jinji',
  templateUrl: './jinji.component.html',
  styleUrls: ['./jinji.component.css']
})
export class JinjiComponent implements OnInit {
  private shenheren: string;

  @Input('Import')
  private how: Number;

  @Output('Export')
  EmitData: EventEmitter<string> = new EventEmitter();

  constructor() {

  }

  ngOnInit() {
    // console.log('how:' + this.how);
    switch (this.how) {
      case 1:
        this.shenheren = '马云';
        // console.log(1);
        break;
      case 2:
        this.shenheren = '李彦宏';
        // console.log(2);
        break;
      case 3:
        this.shenheren = '马化腾';
        // console.log(3);
        break;
      case 4:
        this.shenheren = '柳传志';
        // console.log(4);
        break;
      default:
        this.shenheren = '贾跃亭';
        // console.log(5);
        break;
    }
    this.EmitData.emit(this.shenheren);
  }
}

运行后，页面console窗口中会打印出各位大佬的姓名，如图：

image.png