Before entering the topic, let's understand the life cycle of angular.
life cycle
Hook classification
-
Hooks common to directives and components
- with OnChanges
- with OnInit
- ngDoCheck
- ngOnDestroy
-
Component specific hooks
- ngAfterContentInit
- ngAfterContentChecked
- ngAfterViewInit
- ngAfterViewChecked
The function and calling order of lifecycle hooks
- ngOnChanges - Called when the value of a data-bound input property changes
- ngOnInit - called after the first ngOnChanges
- ngDoCheck - custom method to detect and handle value changes
- ngAfterContentInit - called after the component content has been initialized
- ngAfterContentChecked - called every time the component checks content
- ngAfterViewInit - Called after the component's corresponding view is initialized
- ngAfterViewChecked - called every time the component checks the view
- ngOnDestroy - called before the directive is destroyed
first load order
export class LifecircleComponent {
constructor() {
console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做')
}
ngOnChanges() {
console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)');
}
ngOnInit() {
console.log('02ngOnInit执行了--- 请求数据一般放在这个里面');
}
ngDoCheck() {
console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
}
ngAfterContentInit() {
console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用');
}
ngAfterContentChecked() {
console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用');
}
ngAfterViewInit() : void {
console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）');
}
ngAfterViewChecked() {
console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用');
}
ngOnDestroy() {
console.log('08ngOnDestroy执行了····');
}
//自定义方法
changeMsg() {
this.msg = "数据改变了";
}
}
Reference: https://www.cnblogs.com/Aerfajj/p/10748887.html
Our requirement is that the child component listens to the value passed in by the parent component, and the role of ngOnChanges is to call when the value of the data binding input property changes, which is exactly what we need. Not much nonsense, just go to the code:
parent component
<child-demo [tabValue]="tabValue"></child-demo>
Child component ts (for use with SimpleChange)
import {Component, EventEmitter, Input, OnInit, OnChanges, SimpleChange, Output} from '@angular/core';
@Component({
selector: 'app-child-demo',
templateUrl: './child-demo.component.html',
styleUrls: ['./child-demo.component.scss']
})
export class ChildDemoComponent implements OnInit {
@Input() tabValue;
@Output() gotoList: EventEmitter<{ goto: boolean, group: string}> = new EventEmitter<{goto: false, group: ''}>();
constructor(private childDemoService: ChildDemoService) {
}
ngOnInit() {
}
ngOnChanges(changes: SimpleChange){
if (changes['tabValue']) {
//具体业务代码
}
}
}
//changes['tabValue']有三个属性，currentValue-当前值 previousValue-改变之前的值
// firstChange-是否是第一次改变（previousValue为undefined时true,否则为false）
Summarize:
1.ngOnChanges is only called when the attribute passed in by @Input changes.
2. When the @Input property is an object, it will not be triggered when the property value of the object changes, but will only be triggered when the reference of the object changes, so if you want to monitor the change of the object, you cannot directly modify the properties of the object, but is to reassign the entire object.