【Angular】-@Output装饰器

前言

上篇文章介绍了输入属性：输入属性，这篇文章介绍输出属性。

输出属性

子组件向父组件发送数据，子组件用（EventEmitter）a1: EventEmitter = new EventEmitter();来发射数据，并用@Output装饰器注解，然后在父组件中接收。

场景

一个组件可以连接到股票交易所，实时显示股票变动的价格，为了让这个组件可以在不同的金融类的应用中重用，组件除了显示价格外，还应该将最新价格发送到组件之外，这样其他的组件就可根据变动的价格执行相应的业务逻辑

步骤

1、创建子组件（报价组件），然后模拟一个实时变动的股票价格
(1)在报价组件的控制器中定义报价对象，封装股票价格信息

// 定义报价对象，封装股票价格信息，
// 将特定数据结构用类或接口来明确定义是一个好的习惯，
// 因为使用typescripe变成，声明类或结构可以让IDE帮助我们做类型检查和语法提示
export class PriceQuote {
  //在构造函数声明属性
  constructor(public stockCode:string,
              public lastPrice:number
  ){

  }
}

然后声明两个属性，用来做绑定

stockCode:string = "IBM";
  price:number;

然后在构造函数中写一个定时器，声明一个priceQuote变量，模拟价格实时改变

constructor() { 
    setInterval(() => {
      // 声明一个priceQuote变量
      let priceQuote:PriceQuote = new PriceQuote(this.stockCode, 100*Math.random());
      this.price = priceQuote.lastPrice;
      // 用emit方法发射事件的时候，就是这个泛型<PriceQuote>所制定的变量priceQuote的数据
    },1000)
  }

(2)修改模版，将属性绑定到模版上

<div>
  这里是报价组件
</div>
<div>
  股票代码是{{stockCode}},股票价格是{{price | number:'2.2-2'}}
</div>

(3) 然后在父组件中显示报价组件的信息

2、将信息输出出去，谁感兴趣谁订阅

3、父组件接收数据，并显示

export class AppComponent {

  stock = "";
  //给本地的priceQuote设置默认值
  priceQuote:PriceQuote = new PriceQuote("",0);

  // 在priceQuoteHandler方法中接收event，event类型就是PriceQuote类型的（子组件中发射出的类型）
  priceQuoteHandler(event:PriceQuote){
    // 然后让本地的priceQuote等于捕获的event
    this.priceQuote = event;
  }
}

然后在父组件模版中绑定事件

<!-- 事件绑定，捕获lastPrice -->
<!-- 捕获的事件的名字lastPrice和子组件中输出属性的名字是一样的 -->
<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>
<div>
  这是在报价组件外部
</div>
<div>
  股票代码是{{priceQuote.stockCode}},
  股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}
</div>

4、显示效果

小结
这样就实现了子组件向父组件传递数据，并且子组件和父组件的股票值同时改变。