[Angular 2] 如何讓變數在兩個components傳遞?－~

參考資料:

http://ben-do.github.io/2016/07/22/Note-of-Angular-2-How-to-pass-variable-between-two-components/

https://angular.io/guide/component-interaction

有A B兩個component，B為A的child component，想要在B component 顯示 A component的變數。

檔案分別有以下四個，其對應到的selector分為別<A-selector>與<B-selector>，要傳的變數為myVar

AComponent.ts
AComponent.html
BComponent.ts
BComponent.html

在AComponent.ts的class中先宣告myVar

export class AComponent implements OnInit {
   	myVar: number;
       ...
       ...
   }

在AComponent.html傳入變數

1	<B-selector [myVar]="myVar"></B-selector>

在BComponent.ts中 import Input功能，並宣告變數，變數前面需要加上@Input()

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

export class BComponent implements OnInit {
	@Input() myVar: number;
}

接著就可以在B Component中使用該變數了

參考

Pass data from parent to child with input binding

情境 II:

接續上例，在B Component更動過該變數之後，想要讓A Component同時也發生變化。

在AComponent.ts的class中先宣告一個函數來處理B component更動到myVar的事件

export class AComponent implements OnInit {
   	myVar: any;
       ...
       ...
       onChangeVar(variable: number) {
         this.myVar = variable;
     }
   }

在AComponent.html中bind該事件

1	<B-selector [myVar]="myVar" (onChangeVar)="onChangeVar($event)"></B-selector>

在BComponent.ts中 import Output、EventEmitter功能，並宣告在1提到的函數，變數前面需要加上@Output()

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

export class BComponent implements OnInit {
	...
	@Output() onChangeVar = new EventEmitter();
    ...
}