Angular学习笔记（十三）之组件通讯输入/输出属性

组件通讯

需要做到组件通讯松耦合性，这样组件的重用性才高

父子组件通讯

输入 @Input()

接收父组件信息，被@Input装饰器注解的属性

输出 @Output()

将自身信息告知父组件，被@Output装饰器注解，使用Rxjs中的EventEmitter发射事件

---

输入属性demo

写一个从父组件接收信息的demo

子组件

//html
<p>
  我是子组件，我要从父组件接收信息：{{keyWord}}
</p>
//ts
export class ChildComponent implements OnInit {
  @Input()
  private keyWord:string;  //keyWord用来接收父组件信息

  constructor() { }

  ngOnInit() {
  }

}

父组件

//html
<input [(ngModel)]="ParentKeyWord">
<app-child [keyWord]="ParentKeyWord"></app-child> <!-- 方括号表示输入属性的值 -->
//ts
export class AppComponent {
  ParentKeyWord:string;
}

• 在子组件中定义要接收信息的变量 @Input() keyword:string
• 在父html中相关的子标签接收父组件的信息 [keyword]="ParentKeyWord"
• 可以使用@Input('key') keyword:string，将输入属性的变量改名为key

Tips：输入属性是单向的数据传递，只能父组件传递信息给子组件，子组件无法影响父组件

---

输出属性demo

之前在数据绑定时写过内置事件绑定，现在写一下自定义事件的发射。使用输出属性和EventEmitter对象发射自定义事件，这些事件可以被其他组件处理。

EventEmitter:Rxjs中subject对象的子类，在响应式编程中既可以做观察者，也可做被观察者，可以使用emit()发射事件，也可以使用subscribe()订阅EventEmitter发射出来的事件流

子组件将结果返回给父组件的demo

子组件

//html:
<p>
  我是子组件，我要从父组件接收信息：{{keyWord}},价格是{{price}}
</p>

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})


export class ChildComponent implements OnInit {
  @Input()
  private keyWord:string;

  private price:number;

  @Output()
  searchResult:EventEmitter<StockInfo> = new EventEmitter();
  //格式：EventEmitter<要发射的事件类型>，使用EventEmitter对象，因为其emit方法可以用来发射数据

  constructor() { }

  ngOnInit() {
    setInterval(()=>{
        //查询出现的股票信息
        let stockInfo:StockInfo = new StockInfo(this.keyWord,100*Math.random());
        //查询股票价格，绑定在html上
        this.price = stockInfo.price;
        //将股票信息发射出去
        this.searchResult.emit(stockInfo);
    },3000);

  }

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

    }
}

父组件：

//html:
<div>
<app-child [keyWord]="ParentKeyWord" (searchResult)="searchResultHandle($event)"></app-child>
价格是{{currentPrice}}
</div>
<!-- (searchResult)自定义的发射事件，等号右侧用searchResultHandle方法处理发射出来的事件 -->

//ts
export class AppComponent {
  ParentKeyWord:string;
  currentPrice:number;
  searchResultHandle(stockInfo){
    this.currentPrice = stockInfo.price;
  }
}

• 子组件查询到相关股票信息后
• 使用@Output()输出属性和EventEmitter对象声明事件searchResult
• 使用emit()方法发射股票信息出去
• 在父组件接收并处理事件
• 可以使用@Output('mysearchResult')，将输出属性的变量改名

Tips:EventEmitter对象来自@angular/core

输出属性命名规则

child.component.ts:

  @Input() rating:number;

  @Output() ratingChange:EventEmitter<number> = new EventEmitter();
  //这样的命名规则可以使rating进行双向数据绑定

father.component.html

<app-stars [(rating)]="stock.rating"></app-stars>

中间人模式

第一种情况：用于A和B组件都有的父组件
当B组件需要A组件的输出信息时，A组件发射事件，其父组件接收，然后B组件通过@Input()属性接收父组件信息。