1.父組件向子組件傳值
通過(guò)@Input傳值
先定義一個(gè)子組件
ng g component order
在order.component.ts里面定義
這里是Input要記得引入 import { Component, OnInit ,Input} from '@angular/core'
export class OrderComponent implements OnInit {
@Input() //一定要寫上@Input裝飾器
stockCode:string;
@Input()
amout:number
constructor() { }
ngOnInit() {
}
}
order.component.html輸入
<div>
我是子組件
</div>
<div>
買{{amout}}手{{stockCode}}股票
</div>
在父組件app.component.ts里面定義
export class AppComponent {
stock = "";
}
在父組件的模板app.component.html里面定義
<div>
我是父組件
</div>
<div>
<input type="text" placeholder="請(qǐng)輸入股票代碼" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amout]="100"></app-order>
</div>
2.子組件傳值給父組件
@output傳值給父組件
定義一個(gè)子組件
ng g component price-quote
在price-quote.component.ts中
import { Component, OnInit,EventEmitter ,Output} from '@angular/core';
@Component({
selector: 'app-price-quote',
templateUrl: './price-quote.component.html',
styleUrls: ['./price-quote.component.css']
})
export class PriceQuoteComponent implements OnInit {
stcokCode:string = "IBM";
price:number;
@Output() //與@Input剛好相反垛耳，記得也要用import引入
lastPrice:EventEmitter<PriceQuote> = new EventEmitter(); //準(zhǔn)備用它來(lái)發(fā)射事件
constructor() {
setInterval(()=>{
let priceQuote:PriceQuote = new PriceQuote(this.stcokCode,100*Math.random()); //使用隨機(jī)函數(shù)來(lái)模擬股票價(jià)格的波動(dòng)江场，兩個(gè)參數(shù)一個(gè)是股票代碼嘁捷，一個(gè)是股票價(jià)格
this.price = priceQuote.lastPrice;
this.lastPrice.emit(priceQuote)
},1000)
}
ngOnInit() {
}
}
export class PriceQuote{ //PriceQuote是自定義的一個(gè)類
constructor(public stockCode:string,
public lastPrice:number
){
}}
price-quote.component.html
<div>
這里是報(bào)價(jià)組件
</div>
<div>
股票代碼是{{stockCode}}哀墓，股票價(jià)格是{{price |number:"2.2-2"}}
</div>
app.component.ts
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);
//父組件接受數(shù)據(jù)
priceQuoteHandler(event,PriceQuote){
this.priceQuote = event;
}
}
app.component.html
//這里是通過(guò)事件綁定觸發(fā)并且捕獲
<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>
<div>這是在報(bào)價(jià)組件外部，股票代碼是{{priceQuote.stcokCode}}</div>
<div>股票價(jià)格是{{priceQuote.lastPrice |number:'2.2-2'}}</div>
