# Angular 组件交互 ngOnChanges 监听某一属性值变更

> 我们在实际项目中会拆分各个功能模块，以便页面复用，避免重复工作。那么，这里就涉及到组件之间的交互问题。例如常使用的，输入型数据绑定、setter截听、ngOnChanges()截听以及通过创建引入服务来通讯。这篇文章着重看下关于ngOnChanges()方法监听数据变更。

Author: DeathGhost
Published: 2020-09-08 20:23:40
Category: angular
Canonical: https://www.deathghost.cn/article/angular/82
Keywords: Angular, 组件交互, 通讯, 多属性, 生命周期, 生命周期钩子, 数据变更, SimpleChange, 数据变更检测, OnChanges

有时候瞪大眼睛看文档，也会遗漏掉所谓“不起眼”的关键点。话又说回来，只有在遇到问题的时候才会去解决问题；如果一直没遇到，可能就不会知道它的存在。下面看看几种常用的组件交互方法，其他的参阅官方文档。

![Angular 组件交互 ngOnChanges 监听属性值变更](https://www.deathghost.cn/public/upload/article/2020/09/08/1599571680331453.jpg)

Angular 组件交互 ngOnChanges 监听属性值变更

## 通过输入型绑定把数据从父组件传到子组件

例如：我们在父组件获取到用户ID将其传入<app-user-list>组件。

<app-user-list [userId]="userId"></app-user-list>
那么在.TS中我们就可以通过@Input() 获取。

export class UserListComponent {
  // ...
  @Input() userId: number;
  // ...
}
通过 setter 截听输入属性值的变化

export class UserListComponent {
  private _userId: number;

  @Input()
  set userId(userId: number) {
    this._userId= userId;
  }

  get userId(): number{ return this._userId; }
}

## 父组件和子组件通过服务来通讯

可参阅[这篇文章](https://www.deathghost.cn/article/angular/50)。

## 通过ngOnChanges()来截听输入属性值的变化

使用 OnChanges 生命周期钩子接口的 ngOnChanges() 方法来监测输入属性值的变化并做出回应。当需要监视多个、交互式输入属性的时候，本方法比用属性的 setter 更合适，所以具体根据实际场景而定。

## 先了解下Angular生命周期钩子

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。

一旦检测到该组件或指令的输入属性发生了变化，Angular 就会调用它的 ngOnChanges() 方法。ngOnChanges() 方法获取了一个对象，它把每个发生变化的属性名都映射到了一个SimpleChange对象， 该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代，并记录它们。

用途：当 Angular 设置或重新设置数据绑定的输入属性时响应。

时机：在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。

## 为什么这里着重说明ngOnChanges() 方法？

实际项目中，我个人一直混合使用上述方法处理，但是今天遇到多属性值同时含有双向绑定的属性，出现了多次执行（HTTP请求）的问题。唯独忽略了SimpleChange对象。所以在此笔记下✍。

假如组件上绑定3个属性对象值，只需要在属性&ldquo;current&rdquo;值发生变更时才执行。

import { ***, SimpleChanges } from '@angular/core';
{current: SimpleChange}
{update: SimpleChange}
{orderDetail: SimpleChange}
ngOnChanges(changes: SimpleChanges) {
  // current 属性值变更时
  if (changes.current) {
    this.getData();
  }
}
问题点就在这里，文档上也有说明，就是应用时没在意🤣。所以我们只需要判断是否为某个属性值变更，方才执行其他方法。有的场景下使用ngOnChange()比上述其他方式更方便。

## Related

- Previous: [初略Angular应用安装@angular/pwa](https://www.deathghost.cn/article/angular/76)
- Next: [Angular自定义预加载策略](https://www.deathghost.cn/article/angular/88)