【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、显示效果
这里写图片描述

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木子松的猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值