一、输入属性（父组件与子组件通信）
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. 定义报价组件控制器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
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
|
1
2
3
4
5
6
|
<p> 这里是报价组件
</p><div> 股票代码是{{stockCode}}, 股票价格是{{price | number:'2.2-2'}}
</div> |
4. 父组件控制器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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
|
1
2
3
4
5
6
7
8
|
<div> 我是父组件
</div><app-price-quote (priceChange)="priceQutoehandler($event)"></app-price-quote>
<div> 这是在报价组件外部，股票代码是{{priceQuote.stockCode}},
股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}
</div> |
6.效果图
三、中间人模式
当另个组件不是父子组件关系时，需要两个共同的父组件，这个父组件就是中间人模式
中间人模式同时使用了输入属性和输出属性
1. 报价组件定义
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
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
|
1
2
3
4
5
6
7
8
9
|
<p> 这里是报价组件
</p><div> 股票代码是{{stockCode}}, 股票价格是{{price | number:'2.2-2'}}
</div><div> <input type='button' value='立即购买' (click)="buyStock($event)">
</div> |
3.订单组件控制器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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
|
1
2
3
4
5
6
|
<div> 我下单组件
</div><div> 买100手{{priceQutoe.stockCode}}股票,买入价为{{priceQutoe.lastPrice | number:'2.2-2'}}
</div> |
5. 父组件的控制器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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
|
1
2
3
4
5
|
<div> 我是父组件
</div><app-price-quote (buy)="buyHandler($event)"></app-price-quote>
<app-order [priceQutoe]="priceQuote"></app-order>
|
7.效果图
当点击“立即购买”时，显示当时的显示价格。
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/7257929.html，如需转载请自行联系原作者