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

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

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

lifecycle.components.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from "../../services/user/user.service";

@Component({
  selector: 'app-lifecycle',
  templateUrl: './lifecycle.component.html',
  styleUrls: ['./lifecycle.component.scss'],
  providers: [ UserService ]
})

export class LifeCycleComponent implements OnInit {

	// 构造函数，除了使用简单的值对局部进行初始化之外，不应该做其他的操作
	constructor(public user: UserService) {}
	
	// 当被绑定的输入属性值发生变化时调用
	ngOnChanges(): void {}
	
	//初始化执行，一般做请求数据
	ngOnInit(): void {}
	
	//组件挂载触发
	ngDoCheck(): void {}

	//内容渲染进组件之后调用
	ngAfterContentInit(): void {}

	//完成被渲染组件内容变更之后调用
	ngAfterContentChecked(): void {}

	//视图加载完成之后调用
	ngAfterViewInit(): void {}

	//视图或子视图变更完成后调用
	ngAfterViewChecked(): void {}

	//组件销毁时调用
	ngOnDestory(): void {}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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