Angular @Input() @Output()

1.@Input()

组件的输入属性，是指被@Input()注解的属性，用来从父组件接收数据

思路：将搜索关键字从父组件传递给子组件

（1）父组件

A.父组件模板

我是父组件

B.父组件控制器

export class AppComponent {
    public search:string;
}

（2）子组件

A.模板

我是子组件
股票搜索的关键字是{{keyword}}

B.控制器

export class SearchStockComponent implements OnInit {
  @Input()
  private keyword:string;
  constructor() { }

  ngOnInit() {
    
  }

}

2.@Output()

思路：子组件接收到关键字，负责将结果查出来以后，传回给父组件

使用eventEmitter类型的对象来发射自定义事件，这些事件可以被其他组件处理，emit()发射事件，subscribe()订阅发射的事件流

（1）子组件使用@Output()声明个EventEmitter类型的事件，将查到的股票信息使用emit()发射到组件外部

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-search-stock',
  templateUrl: './search-stock.component.html',
  styleUrls: ['./search-stock.component.css']
})
export class SearchStockComponent implements OnInit {
  @Input()
  private keyword:string;
  private price :number;

  @Output()    //searchResult属性是输出属性，输出的是一个事件，事件的类型为EventEmitter
  searchResult:EventEmitter=new EventEmitter();
  constructor() { }

  ngOnInit() {
    setInterval(()=>{
       let stockInfo:StockInfo=new StockInfo(this.keyword,Math.random()*100);
       this.price=stockInfo.price;
       this.searchResult.emit(stockInfo);
    },3000)
  }

}

export class StockInfo{
constructor(public name:string,public price:number){}
}

模板

我是子组件
股票搜索的关键字是{{keyword}},当前价格是{{price}}

（2）如何在组建外部捕获子组件发射的事件，并处理其中的信息

我是父组件
股票搜索的关键字是{{search}},当前价格是{{price}}

控制器处理

export class AppComponent {
    public search:string;
    public price:number;
    searchResultHandler(StockInfo){
         this.price=StockInfo.price;
    }
}

@Input() @Output()都是通过父子组件关系来实现