Anglar 組件間的通信
阿新 • • 發佈：2017-07-30
core put cli pri template itl public 值傳遞 ast
/* *//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) {
}
}
一、輸入屬性（父組件與子組件通信）
1. 創建工程
ng new demo1
2.創建order組件
ng g component corder
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 [email protected]3. 定義報價組件html
<p>
這裏是報價組件
</p>
<div>
股票代碼是{{stockCode}}, 股票價格是{{price | number:‘2.2-2‘}}
</div>
4. 父組件控制器
import { Component } from [email protected]/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 [email protected]/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;
[email protected](‘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 [email protected]/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 [email protected]/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.效果圖
當點擊“立即購買”時，顯示當時的顯示價格。
Anglar 組件間的通信