angular组件生命周期

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41952198/article/details/82802333

1、ngOnChanges:在ngOnInit之前, 当数据绑定输入属性的值发生变化时调用。 并且有一个SimpleChanges类型的参数,它其实是一个类型为SimpleChange,并且键值为属性名的数组:
2、ngOnInit:在第一次ngOnChanges之后。
3、ngDoCheck:每次Angular变化检测时。
4、ngAfterContentInit:在组件使用 ng-content 指令的情况下,Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。
5、ngAfterContentChecked:在组件使用 ng-content 指令的情况下,Angular 会在检测到外部内容的绑定或者每次变化的时候调用。
6、ngAfterViewInit:在组件相应的视图初始化之后调用,它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
7、ngAfterViewChecked:在子组件视图和子视图检查之后。
8、ngOnDestroy:在Angular销毁组件/指令之前。

代码方式

import { Component,Input, OnInit, OnChanges,DoCheck,AfterContentInit, AfterContentChecked, AfterViewChecked,AfterViewInit, OnDestroy} from '@angular/core';

@Component({
  selector: 'app-hook',
  templateUrl: './hook.component.html',
  styleUrls: ['./hook.component.css']
})
export class HookComponent implements OnInit, OnChanges,
   AfterContentInit,DoCheck,
  AfterContentChecked, AfterViewChecked,
  AfterViewInit, OnDestroy  {

  @Input() data;
  constructor() { }
  ngOnChanges(changes) {

    console.log('On changes', changes);
  }
  ngOnInit() {
  }
  // 脏值检测器被调用后调用
  ngDoCheck() {
    console.log('Do check');
  }
  组件销毁之前
  ngOnDestroy() {
    console.log('Destroy');
  }
  // 组件-内容-初始化完成 PS:指的是ContentChild或者Contentchildren
  ngAfterContentInit() {
    console.log('After content init');
  }
  // 组件内容脏检查完成
  ngAfterContentChecked() {
    console.log('After content checked');
  }
  // 组件视图初始化完成 PS:指的是ViewChild或者ViewChildren
  ngAfterViewInit() {
    console.log('After view init');
  }
  // 组件视图脏检查完成之后
  ngAfterViewChecked() {
    console.log('After view checked');
  }

}

展开阅读全文

没有更多推荐了,返回首页