在上一篇文章中,我对服务的作用及创建使用稍作介绍。那么,问题来了,在服务中 这个公共领域,如果其属性值发生变化,那我们如何将其更新到组件中呢?
首先,你需要了解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 {}
}
当界面属性值发生变化,亦或者是子组件中的值、服务中的属性值发生变化,其都会触发 ngDoCheck()、ngAfterContentChecked()、ngAfterViewChecked()
,所以我们只需要在这几个方法中去进行使用服务中的属性即可。