设计素材网站知乎,广告营销留电话网站,wordpress本地时间,网络营销方案策划报告在进入主题之前#xff0c;先了解一下angular的生命周期。
生命周期
钩子分类 指令与组件共有的钩子 ngOnChangesngOnInitngDoCheckngOnDestroy 组件特有的钩子 ngAfterContentInitngAfterContentCheckedngAfterViewInitngAfterViewChecked
生命周期钩子的作用及调用顺序
…在进入主题之前先了解一下angular的生命周期。
生命周期
钩子分类 指令与组件共有的钩子 ngOnChangesngOnInitngDoCheckngOnDestroy 组件特有的钩子 ngAfterContentInitngAfterContentCheckedngAfterViewInitngAfterViewChecked
生命周期钩子的作用及调用顺序
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传入的属性发生变化时会调用。
2.当Input属性是一个对象当对象的属性值发生变化并不会触发当对象的引用发生变化时才会触发所以想要监听对象的变化不可以直接修改对象的属性而是要给整个对象重新赋值。
