Angular监听服务（Service）中的数据变化

在上一篇文章中&＃xff0c;我对服务的作用及创建使用稍作介绍。那么&＃xff0c;问题来了&＃xff0c;在服务中 这个公共领域&＃xff0c;如果其属性值发生变化&＃xff0c;那我们如何将其更新到组件中呢&＃xff1f;

首先&＃xff0c;你需要了解Angular的完整生命周期&＃xff0c;对应的生命周期钩子的作用是什么&＃xff0c;都分别在什么时候触发。

lifecycle.components.ts

import { Component, OnInit } from &＃39;&＃64;angular/core&＃39;;
import { UserService } from "../../services/user/user.service";&＃64;Component({selector: &＃39;app-lifecycle&＃39;,templateUrl: &＃39;./lifecycle.component.html&＃39;,styleUrls: [&＃39;./lifecycle.component.scss&＃39;],providers: [ UserService ]
})export class LifeCycleComponent implements OnInit {// 构造函数&＃xff0c;除了使用简单的值对局部进行初始化之外&＃xff0c;不应该做其他的操作constructor(public user: UserService) {}// 当被绑定的输入属性值发生变化时调用ngOnChanges(): void {}//初始化执行&＃xff0c;一般做请求数据ngOnInit(): void {}//组件挂载触发ngDoCheck(): void {}//内容渲染进组件之后调用ngAfterContentInit(): void {}//完成被渲染组件内容变更之后调用ngAfterContentChecked(): void {}//视图加载完成之后调用ngAfterViewInit(): void {}//视图或子视图变更完成后调用ngAfterViewChecked(): void {}//组件销毁时调用ngOnDestory(): void {}}


当界面属性值发生变化&＃xff0c;亦或者是子组件中的值、服务中的属性值发生变化&＃xff0c;其都会触发 ngDoCheck()、ngAfterContentChecked()、ngAfterViewChecked()&＃xff0c;所以我们只需要在这几个方法中去进行使用服务中的属性即可。