Angular4的輸入屬性與輸出屬性實(shí)例詳解

...
@Input()
stockCode: string
@Input()
amount: string
...

<p>這里是子組件</p>
<p>股票代碼為{{stockCode}}</p>
<p>股票總數(shù)為{{amount}}</p>

...
stock: string
...

<input type="text" placeholder="請(qǐng)輸入股票代碼" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>

export class PriceQuoteComponent implements OnInit{
 stockCode: string = 'IBM';
 price: number;
 //使用EventEmitter發(fā)射事件
 //泛型是指往外發(fā)射的事件是什么類型
 //priceChange為事件名稱
 @Output()
 priceChange:EventEmitter<PriceQuote> = new EventEmitter();
 constructor(){
  setInterval(() => {
   let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());
   this.price = priceQuote.lastPrice;
   //發(fā)射事件
   this.priceChange.emit(priceQuote);
  })
 }
 ngInit(){
 }
}
//股票信息類
//stockCode為股票代碼，lastPrice為股票價(jià)格
export class PriceQuote{
 constructor(public stockCode:string,
    public lastPrice:number
 )
}

<p>
 這里是報(bào)價(jià)組件
</p>
<p>
 股票代碼是{{stockCode}}
</p>
<p>
 股票價(jià)格是{{price | number:'2.2-2'}}
</p>

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<div>
 這是在報(bào)價(jià)組件外， 股票代碼是{{priceQuote.stokcCode}}，
 股票價(jià)格是{{priceQuote.lastPrice | number:'2.2-2'}}
</div>

export class AppComponent{
 priceQuote:PriceQuote = new PriceQuote('', 0);
 priceQuoteHandler(event:PriceQuote){
  this.priceQuote = event;
 }
}