父元件

根據元件名找到元件

<app-home-event [tableData]="family" (familyPhone)="receiveFamilyPhone($event)"></app-home-event>

傳遞引數一定要在暴露的事件中新增$event物件，否則無法獲取引數

傳資料給子元件，接受子元件的事件

import {Component, OnInit, OnDestroy} from '@angular/core';
import {FormControl} from '@angular/forms';
import
 
 {HttpInterceptorService} from '../../../utils/http-interceptor.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  // 模擬傳入給子元件的資料
  public family = [{
    name: 'huangbiao',
    age:
 
 29
  }, {
    name: 'liumei',
    age: 30
  }, {
    name: 'huanghaili',
    age: 4
  }]

  receiveFamilyPhone (familyStr: string) {
    console.dir(arguments);
    alert(familyStr);
  }
}

子元件

模板渲染父元件傳遞過來的資料

<div>
  <table class="table">
    <thead>
      <tr>
        <
 
th scope="col">name</th>
        <th scope="col">age</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let person of tableData">
        <td scope="row">{{person.name}}</td>
        <td>{{person.age}}</td>
      </tr>
    </tbody>
  </table>

  <button class="btn btn-primary" (click)="emitAction()" type="submit">
    <i class="icon iconfont icon-clearall"></i>
    Clear
  </button>
</div>

子元件接收屬性觸發父元件事件

1. @Input() 表示從父節點獲取屬性
2. @Output() 表示從子節點傳事件給父元件

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

@Component({
  selector: 'app-home-event',
  templateUrl: './home-event.component.html',
  styleUrls: ['./home-event.component.scss']
})
export class HomeEventComponent implements OnInit {
  @Input() tableData: object;
  @Output() familyPhone = new EventEmitter();

  constructor() {
    // 建構函式還無法獲取父元件傳遞過來的資料，因為還沒有完成元件的賦值動作
    // 官方解釋：在指令的建構函式完成之前，那些被繫結的輸入屬性還都沒有值。
    console.dir(this.tableData);
  }

  ngOnInit() {
    console.dir(this.tableData);
  }

  emitAction () {
    const backStr = JSON.stringify(this.tableData);
    alert('emitAction : ' + backStr);
    // 暴露familyPhone事件，並且傳遞引數backStr；注意，在付模板中的引數一定要帶$event
    this.familyPhone.emit(backStr);
  }

}

@Output() familyPhone 表示當前元件對外暴露的事件名是familyPhone，通過 emit(引數)方法觸發父元件的方法