angular 父子组件之间传值

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>