1.父组件向子组件传值
通过@Input传值
先定义一个子组件
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="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amout]="100"></app-order>
</div>
2.子组件传值给父组件
@output传值给父组件
定义一个子组件
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(); //准备用它来发射事件
constructor() {
setInterval(()=>{
let priceQuote:PriceQuote = new PriceQuote(this.stcokCode,100*Math.random()); //使用随机函数来模拟股票价格的波动，两个参数一个是股票代码，一个是股票价格
this.price = priceQuote.lastPrice;
this.lastPrice.emit(priceQuote)
},1000)
}
ngOnInit() {
}
}
export class PriceQuote{ //PriceQuote是自定义的一个类
constructor(public stockCode:string,
public lastPrice:number
){
}}
price-quote.component.html
<div>
这里是报价组件
</div>
<div>
股票代码是{{stockCode}}，股票价格是{{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);
//父组件接受数据
priceQuoteHandler(event,PriceQuote){
this.priceQuote = event;
}
}
app.component.html
//这里是通过事件绑定触发并且捕获
<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>
<div>这是在报价组件外部，股票代码是{{priceQuote.stcokCode}}</div>
<div>股票价格是{{priceQuote.lastPrice |number:'2.2-2'}}</div>
