Angular 4 組件間的通信

一、輸入屬性（父組件與子組件通信）

1. 創建工程

ng new demo1

2.創建order組件

ng g component order

3. 在order組件里定義輸入屬性

order組件的html

 

4. 父組件

app.component.ts中定義stock

 app.component.html, 采用雙向綁定

 

 效果圖

最終父組件IBM的值，通過輸入屬性，把值傳遞給了子組件

 

二、輸出屬性（子組件與父組件通信）

1. ng g component priceQutoe 創建報價組件

2. 定義報價組件控制器

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


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

  stockCode: string = 'IBM';
  price: number;

  @Output('priceChange')
  lastPrice: EventEmitter<PriceQuote> = new EventEmitter();

  constructor() {
    setInterval(() => {
      let priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
      this.price = priceQuote.lastPrice;
      this.lastPrice.emit(priceQuote);
    }, 1000);
  }

  ngOnInit() {
  }

}

export class PriceQuote {
  constructor(public  stockCode: string,
              public  lastPrice: number) {
  }
}

　3. 定義報價組件html

<p>
  這里是報價組件
</p>
<div>
  股票代碼是{{stockCode}}, 股票價格是{{price | number:'2.2-2'}}
</div>

　　

4. 父組件控制器

import { Component } from '@angular/core';
import {PriceQuote} from './price-quote/price-quote.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  stock = '';
  title = 'app';

  priceQuote: PriceQuote = new PriceQuote('', 0);

  priceQutoehandler(event: PriceQuote){
    this.priceQuote = event;
  }
}

　　

5. 父組件html

<div>
  我是父組件
</div>
<app-price-quote (priceChange)="priceQutoehandler($event)"></app-price-quote>
<div>
  這是在報價組件外部，股票代碼是{{priceQuote.stockCode}},
  股票價格是{{priceQuote.lastPrice | number:'2.2-2'}}
</div>

 

6.效果圖

 三、中間人模式

當另個組件不是父子組件關系時，需要兩個共同的父組件，這個父組件就是中間人模式

中間人模式同時使用了輸入屬性和輸出屬性

1. 報價組件定義

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


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

  stockCode: string = 'IBM';
  price: number;

  //@Output('priceChange')
  //lastPrice: EventEmitter<PriceQuote> = new EventEmitter()

  @Output()
  buy: EventEmitter<PriceQuote> = new EventEmitter();

  constructor() {
    setInterval(() => {
      const priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
      this.price = priceQuote.lastPrice;
      //this.lastPrice.emit(priceQuote);
    }, 1000);
  }

  buyStock(event) {
      this.buy.emit(new PriceQuote(this.stockCode, this.price));
  }


  ngOnInit() {
  }

}

export class PriceQuote {
  constructor(public  stockCode: string,
              public  lastPrice: number) {
  }
}

　　

2. 報價組件html

<p>
  這里是報價組件
</p>
<div>
  股票代碼是{{stockCode}}, 股票價格是{{price | number:'2.2-2'}}
</div>
<div>
  <input type='button' value='立即購買' (click)="buyStock($event)">
</div>

　　

3.訂單組件控制器

import {Component, Input, OnInit} from '@angular/core';
import {PriceQuote} from "../price-quote/price-quote.component";

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

  @Input()
  priceQutoe: PriceQuote;

  constructor() { }

  ngOnInit() {
  }

}

　　

4. 訂單組件html

<div>
  我下單組件
</div>
<div>
  買100手{{priceQutoe.stockCode}}股票,買入價為{{priceQutoe.lastPrice | number:'2.2-2'}}
</div>

　　

5. 父組件的控制器

import { Component } from '@angular/core';
import {PriceQuote} from './price-quote/price-quote.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  stock = '';

  priceQuote: PriceQuote = new PriceQuote('', 0);

  priceQutoehandler(event: PriceQuote){
    this.priceQuote = event;
  }

  buyHandler(event: PriceQuote) {
    this.priceQuote = event;
  }
}

　　

6.父組件的html

<div>
  我是父組件
</div>
<app-price-quote (buy)="buyHandler($event)"></app-price-quote>
<app-order [priceQutoe]="priceQuote"></app-order>

　　

7.效果圖

當點擊“立即購買”時，顯示當時的顯示價格。