概述

Angular中的输入输出是通过注解@Input和@Output来标识，它位于组件控制器的属性上方。

输入输出针对的对象是父子组件。

演示

Input

• 新建项目connInComponents:ng new connInComponents.
• 新增组件stock:ng g component stock.
• 在stock.component.ts中新增属性stockName并将其标记为输入@Input():

@Input()  protected stockName: string;

• 既然有@Input()则应有对应的父组件，此处使用默认生成的主组件app.
  在父组件中定义属性keyWork并通过视图文件app.component.html中的标签<input>来进行双向绑定，最后，在视图文件app.component.html中嵌入子组件并进行赋值:

//tsprotected keyWord: string;//html
    

注意，[(ngModel)]需要在app.module.ts中引入模块FormsModule。

这样就完成了父组件向子组件赋值的操作了。

• 在子组件中进行展示

  stock works!
    
       股票名称：{
   {stockName}}
    

Output

Output的赋值操作不像Input那样简单，它需要通过位于@angular/core包下的EventEmitter对象来监听并处理数据。并且需要传入泛型类来规定参数类型。

需求

在父子组件中各自定义一个表示股票价格的属性，并通过Output将子组件中的价格信息传给父组件。

• 由于EventEmitter需要传入泛型类，因此我们首先定义一个股票信息类：

export class StockInfo {  constructor(public name: string, public price: number) {    this.name = name;    this.price = price;  }}

• 在子组件stock.component.ts中新增属性stockPrice和event，并在初始化方法中为stockPrice赋值并通过event将当前绑定对象发射出去:

protected stockPrice: number;  @Output()  protected event: EventEmitter
    
      = new EventEmitter();  ngOnInit() {    setInterval(() => {      const stock: StockInfo = new StockInfo(this.stockName, 100 * Math.random());      this.stockPrice = stock.price;      this.event.emit(stock);    }, 3000);  }
    

此时子组件的发射动作已完成，那么如何接收发射的数据呢？

• 在父组件中定义价格属性currentPrice和接收方法eventHandler：

protected currentPrice: number;  eventHandler(stock: StockInfo) {    this.currentPrice = stock.price;  }

• 在嵌入的子组件视图元素<app-stock>上添加绑定关系：

其中event对应子组件属性，eventHandler对应父组件接收并处理子组件传来的方法，$event代表泛型类参数，此处是一个类型为StockInfo的实例。

此时赋值操作已经完成，在父子组件的视图文件中添加显示接收到的信息（股票价格）即可：

stock.component.html

    
       股票名称：{
   {stockName}}
     
当前价格：{
   {stockPrice | number:'2.1-2'}}
    

app.component.html

    
       股票名称：{
   {keyWord}}
     
当前价格：{
   {currentPrice | number:'2.1-2'}}
    

tips

@Output可以传递参数，其值与嵌入的子组件视图元素<app-stock>上绑定的数据名称统一。

如@Output('lastPrice'),那么

相应改为：

效果

Demo