Angular @Input() @Output()

1.@Input()

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

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

（1）父组件

A.父组件模板

<p>我是父组件</p><input [(ngModel)]="search" /><app-search-stock [keyword]="search"></app-search-stock>

B.父组件控制器

export class AppComponent {    public search:string;}

（2）子组件

A.模板

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

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<StockInfo>=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){}}

模板

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

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

<p>我是父组件</p><p>股票搜索的关键字是{{search}},当前价格是{{price}}</p><input [(ngModel)]="search" /><app-search-stock [keyword]="search" (searchResult)="searchResultHandler($event)"></app-search-stock>

控制器处理

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

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