在进入主题之前，先了解一下angular的生命周期。
生命周期
钩子分类
-
指令与组件共有的钩子
- ngOnChanges
- ngOnInit
- ngDoCheck
- ngOnDestroy
-
组件特有的钩子
- ngAfterContentInit
- ngAfterContentChecked
- ngAfterViewInit
- ngAfterViewChecked
生命周期钩子的作用及调用顺序
- ngOnChanges - 当数据绑定输入属性的值发生变化时调用
- ngOnInit - 在第一次 ngOnChanges 后调用
- ngDoCheck - 自定义的方法，用于检测和处理值的改变
- ngAfterContentInit - 在组件内容初始化之后调用
- ngAfterContentChecked - 组件每次检查内容时调用
- ngAfterViewInit - 组件相应的视图初始化之后调用
- ngAfterViewChecked - 组件每次检查视图时调用
- ngOnDestroy - 指令销毁前调用
首次加载顺序
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 = "数据改变了";
}
}
参照：https://www.cnblogs.com/Aerfajj/p/10748887.html
我们的要求是子组件监听父组件传入的值，而ngOnChanges的作用是当数据绑定输入属性的值发生变化时调用，正是我们所需要的。废话不多说，直接上代码：
父组件
<child-demo [tabValue]="tabValue"></child-demo>
子组件ts(与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）
总结：
1.ngOnChanges只对@Input传入的属性发生变化时会调用。文章来源：https://www.toymoban.com/news/detail-650671.html
2.当@Input属性是一个对象，当对象的属性值发生变化并不会触发，当对象的引用发生变化时才会触发，所以想要监听对象的变化，不可以直接修改对象的属性，而是要给整个对象重新赋值。文章来源地址https://www.toymoban.com/news/detail-650671.html
到了这里，关于angular 子组件ngOnChanges监听@input传入的输入属性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
