下層傳入上層

說明

1. 將下層元件的值，利用事件繫結，傳給上層元件使用
2. 下層元件需加入一個EventEmitter物件的變數
3. 該EventEmitter物件的變數需使用@Output()裝飾器
4. 在上層元件處理值的方法中需要傳入$event參數，該參數為下層元件傳出的值

Template語法：

<下層元件selector名稱 (下層EventEmitter物件的變數)="上層用來處理值的方法($event)">
</下層元件selector名稱>

程式碼範例：

1.在下層元件Component.ts的Metadata中設定selector屬性。加入EventEmitter物件的變數childEvent，並且使用@Output()裝飾器。加入方法fireEmitter()用來發送childEvent。

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

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Output()
  childEvent = new EventEmitter();

  fireEmitter(){
    this.childEvent.emit("下層事件發射");
  }

  constructor() { }

  ngOnInit() {
  }

}

2.在下層元件Template做一個按鈕用來觸發fireEmitter()

<button (click)="fireEmitter()">發射</button>

3.在上層元件Component.ts中加入處理下層值的方法printValue()，印出下層傳來的值

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

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  printValue(childEmitterValue){
    console.log(childEmitterValue);
  }

  constructor() { }

  ngOnInit() {
  }

}

4.在上層元件Template使用下層元件directive，使用事件繫結，用printValue()方法印出下層childEvent發射器傳來的值($event)

<child-component (childEvent)="printValue($event)"></child-component>