【Angular学习】(三)生命周期钩子

理解

Angular提供了生命周期钩子,把这些关键生命时刻暴露出来,赋予我们在它们发生时采取行动的能力。可以将钩子函数理解为在合适的时候做合适的事情。

官方给出的解释是:
每个组件都有一个被 Angular 管理的生命周期。

Angular 创建它,渲染它,创建并渲染它的子组件,在它被绑定的属性发生变化时检查它,并在它从 DOM 中被移除前销毁它。

Angular 提供了生命周期钩子,把这些关键生命时刻暴露出来,赋予你在它们发生时采取行动的能力。

除了那些组件内容和视图相关的钩子外,指令有相同生命周期钩子。

钩子函数

Angular提供了八个钩子函数

  • ngOnchanges

    @input属性(输入属性)发生变化时,会调用。
    当输入属性为对象时,当对象的属性值发生变化时,不会调用,当对象的引用变化时会触发。
    先于ngOnInit调用。

  • ngOnInit

    只执行一次,dom操作可放在其中。
    最常用。

  • ngDoCheck

    每次发生变更检测时都会被调用。

    ngDoCheck() 是Angular中的变更检测机制.它由 zone.js 来实现的.其行为是只要你的Angular中的某个组件发生异步事件.就会检查整个组件树,以保证组件属性的变化或页面的变化是同步的.所以 ngDoCheck() 的触发相当频繁的.并且是我们无法预料到的.也许我们在页面上的一个无意识操作,就会触发几个甚至几十个的 ngDoCheck() 生命周期钩子.

  • ngAfterContentInit

    在组件内容初始化(内容投影到组件中)之后调用。
    第一次ngDoCheck之后调用,只调用一次,只适用于组件。
    父组件调用完成之后,所有子组件才会调用。

    内容投影:父组件写在子标签之间的内容会被渲染到子模板的ng-content中去,类似vue的slot

  • ngAfterContentChecked

    每完成被投影组件内容发生变化,触发检查时调用。
    ngAfterContentInit和ngDocheck之后调用,只适用于组件。
    父组件调用完成之后,所有子组件才会调用。

  • ngAfterViewInt

    组件相应的视图初始化之后调用。
    第一次ngAfterContentChecked之后调用,只调用一次,只适用于组件。
    所有子组件调用完成之后,父组件才会调用。
    此阶段更改属性的值会报错,可在settimeout后运行。

  • ngAfterViewChecked

    组件及子组件视图每次的变更检查之后调用
    所有子组件调用完成之后,父组件才会调用。
    ngAfterViewInit和ngAfterContentChecked之后调用,只适用于组件。
    此阶段更改属性的值会报错,可在settimeout后运行。

  • ngOnDestory

    组件销毁时调用,主要用于内存回收。
    路由跳转时组件会销毁。

钩子执行顺序

constructor

ngOnChanges

ngOnInit

ngDoCheck

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

ngDoCheck

ngAfterContentChecked

ngAfterViewChecked

ngDestory

父组件:
组件模板

<div class="panel-body">
    <input type="text" [(ngModel)]="name">
    {{name}}
     <son [name]="name"></son>
</div>

组件

@Component({
  selector: 'father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.scss']
})
export class FatherComponent implements OnInit {
  public name:string;
  constructor() { }
  ngOnInit() {
    console.log("父组件ngOninit");
  }
  ngOnchanges(){
    console.log("父组件ngonchanges");
  }
  ngDoCheck (){
    console.log("父组件ngDocheck")
  }
  ngAfterContentInit(){
    console.log("父组件ngAfterContentInit")
  }
  ngAfterContentChecked(){
    console.log("父组件ngAfterContentChecked")
  }
  ngAfterViewInit(){
    console.log("父组件ngAfterViewInit")
  }
  ngAfterViewChecked(){
    console.log("父组件ngAfterViewChecked")
  }
}

子组件:

@Component({
  selector: 'son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.scss']
})
export class SonComponent implements OnInit {
  @Input() name:string;
  constructor() { }

  ngOnInit() {
    console.log("子组件ngOninit");
  }
  ngOnChanges (){
    console.log("子组件ngonchanges");
  }
  ngDoCheck (){
    console.log("子组件ngDocheck")
  }
  ngAfterContentInit(){
    console.log("子组件ngAfterContentInit")
  }
  ngAfterContentChecked(){
    console.log("子组件ngAfterContentChecked")
  }
  ngAfterViewInit(){
    console.log("子组件ngAfterViewInit")
  }
  ngAfterViewChecked(){
    console.log("子组件ngAfterViewChecked")
  }
  
}

打印结果:
在这里插入图片描述
当在父组件的input中输入内容时,会打印如下结果:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值