使用生命周期钩子

2019-11-25 08:00:00 · 飞浪

介绍在本指南中，我们将了解Angular生命周期钩子。生命周期钩子在任何JavaScript框架中都必不可少。所有组件都有由Angular管理的生命周期钩子。Angular创建钩子、

介绍

在本指南中，我们将了解 Angular 生命周期钩子。

生命周期钩子在任何 JavaScript 框架中都必不可少。所有组件都有由 Angular 管理的生命周期钩子。Angular 创建钩子、渲染它们、创建和渲染它们的子项、检查数据绑定属性何时更改以及在将它们从 DOM 中删除之前销毁它们。我们将进一步讨论这些生命周期钩子，它们演示了组件或指令生命周期的每个状态。

生命周期钩子

指令和组件实例在 Angular 创建、更新和销毁时都有一个生命周期。开发人员可以通过实现 Angular 核心库中的一个或多个生命周期钩子接口来利用该生命周期中的关键时刻。每个接口都有一个钩子方法，其名称是接口名称加上ng前缀。例如，OnInit 接口有一个名为ngOnInit()的钩子方法，Angular 在创建组件后不久就会调用它。以下是按 Angular 调用顺序列出的生命周期钩子方法列表。

ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked（）
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()

添加接口是可选的，因为接口已从转译后的 JavaScript 中删除。

但是，在使用生命周期钩子方法时添加它们是一种很好的做法。生命周期钩子在构造函数之后调用。

ngOnChanges()

设置或重置数据绑定输入属性后，将调用此钩子。它会自动检测数据绑定中的更改，并使用更新的数据设置变量。

ngOnInit()

此钩子初始化组件。在此函数中，我们通常会编写要在数据呈现到屏幕上之前执行的方法，它会在ngOnChanges()方法之后被调用。

ngDoCheck()

此钩子会检测并处理 Angular 无法自动发现的每个更改。它会在ngOnChanges()和ngOnInit()方法之前被调用。

ngAfterContentInit()

此钩子初始化外部组件并将其投射到当前组件中。它在ngDoCheck()方法之后被调用。第一次调用一次。

ngAfterContentChecked（）

在外部组件投影到当前组件后，以及外部组件发生更改时，都会调用此钩子。它在ngDoCheck()和ngAfterContentInit()之后调用。

ngAfterViewInit()

此钩子初始化组件的视图，首次调用时会调用一次。它在ngAfterContentChecked()之后被调用。

ngAfterViewChecked()

此钩子在内容和子组件视图进入后被调用，并在ngAfterViewInit()和ngAfterContentChecked()之后每当内容被改变时被调用。

ngOnDestroy()

此钩子在组件脱离 DOM 之前被调用。取消订阅每个订阅并清除每个间隔以防止内存泄漏。

您可以在这里了解有关 Angular 生命周期钩子的更多信息。

这就是理论部分。现在让我们深入研究代码，以便让您更清楚地了解。

实际的

执行

首先，我们需要一个项目，因此让我们使用以下代码创建它：

      ng new demo

现在让我们创建子组件。

      ng g c child

现在我们准备实现该示例。我们将在两个组件中实现生命周期钩子，并为子组件添加数据绑定。

应用程序.组件.ts

      export class AppComponent
  implements
    OnChanges,
    OnInit,
    AfterContentInit,
    AfterContentChecked,
    AfterViewInit,
    AfterViewChecked,
    OnDestroy {
  parentData: any;
  data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log("this is the parent onChanges method");
  }
  ngOnInit(): void {
    console.log("this is the parent on init method");
    this.data = "This is the parent";
  }

  ngDoCheck(): void {
    console.log("this is the parent onDoCheck method");
  }

  ngAfterContentInit(): void {
    console.log("this is the parent ngAfterContentInit method");
  }
  ngAfterContentChecked(): void {
    console.log("this is the parent ngAfterContentChecked method");
  }
  ngAfterViewInit(): void {
    console.log("this is the parent ngAfterViewInit method");
  }
  ngAfterViewChecked(): void {
    console.log("this is the parent ngAfterViewChecked method");
  }
  ngOnDestroy(): void {
    console.log("this is the parent onDestroy method");
  }
}
    

app.component.ts将充当父组件。因此，我们定义了两个变量：一个用于检测变化，一个用于在子组件中执行数据绑定。

应用程序.组件.html

      <app-child [parentData]="data"></app-child>
<input
  type="text"
  name="test"
  id="test"
  placeholder="test"
  [(ngModel)]="parentData"
/>
{{parentData}}
    

在这个app.component.html中，我们实现了 app-child 组件，它具有 data-bound 属性和具有双向数据绑定的 input 标签，这将改变parentData。

子组件

      export class ChildComponent
  implements
    OnChanges,
    OnInit,
    AfterContentInit,
    AfterContentChecked,
    AfterViewInit,
    AfterViewChecked,
    OnDestroy {
  @Input() parentData;

  constructor() {}

  ngOnChanges(changes: SimpleChanges): void {
    console.log("this is the child onChanges method");
  }
  ngOnInit(): void {
    console.log("this is the child on init method");
  }

  ngDoCheck(): void {
    console.log("this is the child onDoCheck method");
  }
  ngAfterContentInit(): void {
    console.log("this is the child ngAfterContentInit method");
  }
  ngAfterContentChecked(): void {
    console.log("this is the child ngAfterContentChecked method");
  }
  ngAfterViewInit(): void {
    console.log("this is the child ngAfterViewInit method");
  }
  ngAfterViewChecked(): void {
    console.log("this is the child ngAfterViewChecked method");
  }
  ngOnDestroy(): void {
    console.log("this is the child onDestroy method");
  }
}
    

在这个child.component.ts中，我们使用@Input()实现了生命周期钩子，这是数据绑定所必需的。

子组件.html

      This is the child component

在child.component.html中，我们仅显示一条消息来表明这是子组件数据。

现在我们准备运行该项目，输出将显示在控制台中。使用以下命令运行它：

      ng serve

输出

      this is the parent on init method                          app.component.ts:22
 this is the parent onDoCheck method                        app.component.ts:27 
 this is the parent ngAfterContentInit method               app.component.ts:31
 this is the parent ngAfterContentChecked method            app.component.ts:34
 this is the child onChanges method                         child.component.ts:15
 this is the child on init method                           child.component.ts:18
 this is the child onDoCheck method                         child.component.ts:22
 this is the child ngAfterContentInit method                child.component.ts:25
 this is the child ngAfterContentChecked method             child.component.ts:28
 this is the child ngAfterViewInit method                   child.component.ts:31
 this is the child ngAfterViewChecked method                child.component.ts:34
 this is the parent ngAfterViewInit method                  app.component.ts:37
 this is the parent ngAfterViewChecked method               app.component.ts:40
 this is the parent onDoCheck method                        app.component.ts:27
 this is the parent ngAfterContentChecked method            app.component.ts:34
 this is the child onDoCheck method                         child.component.ts:22
 this is the child ngAfterContentChecked method             child.component.ts:28
 this is the child ngAfterViewChecked method                child.component.ts:34
 this is the parent ngAfterViewChecked method               app.component.ts:40
    

在这里您会注意到生命周期钩子方法的一些关键行为。

如上所述，首先，ngOnChanges()方法会起作用。但有一个条件，即它应该具有数据绑定的输入属性。在我们的app.component.html中，没有@Input()；因此，在这种情况下，它会在ngOnInit()方法之后直接执行。在ngOnInit()之后，它会运行ngDoCheck()方法来检查组件中的更改。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用生命周期钩子

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

export class AppComponent implements OnChanges, OnInit, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy { parentData: any; data: string; ngOnChanges(changes: SimpleChanges): void { console.log("this is the parent onChanges method"); } ngOnInit(): void { console.log("this is the parent on init method"); this.data = "This is the parent"; } ngDoCheck(): void { console.log("this is the parent onDoCheck method"); } ngAfterContentInit(): void { console.log("this is the parent ngAfterContentInit method"); } ngAfterContentChecked(): void { console.log("this is the parent ngAfterContentChecked method"); } ngAfterViewInit(): void { console.log("this is the parent ngAfterViewInit method"); } ngAfterViewChecked(): void { console.log("this is the parent ngAfterViewChecked method"); } ngOnDestroy(): void { console.log("this is the parent onDestroy method"); } }

export class ChildComponent implements OnChanges, OnInit, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy { @Input() parentData; constructor() {} ngOnChanges(changes: SimpleChanges): void { console.log("this is the child onChanges method"); } ngOnInit(): void { console.log("this is the child on init method"); } ngDoCheck(): void { console.log("this is the child onDoCheck method"); } ngAfterContentInit(): void { console.log("this is the child ngAfterContentInit method"); } ngAfterContentChecked(): void { console.log("this is the child ngAfterContentChecked method"); } ngAfterViewInit(): void { console.log("this is the child ngAfterViewInit method"); } ngAfterViewChecked(): void { console.log("this is the child ngAfterViewChecked method"); } ngOnDestroy(): void { console.log("this is the child onDestroy method"); } }

this is the parent on init method app.component.ts:22 this is the parent onDoCheck method app.component.ts:27 this is the parent ngAfterContentInit method app.component.ts:31 this is the parent ngAfterContentChecked method app.component.ts:34 this is the child onChanges method child.component.ts:15 this is the child on init method child.component.ts:18 this is the child onDoCheck method child.component.ts:22 this is the child ngAfterContentInit method child.component.ts:25 this is the child ngAfterContentChecked method child.component.ts:28 this is the child ngAfterViewInit method child.component.ts:31 this is the child ngAfterViewChecked method child.component.ts:34 this is the parent ngAfterViewInit method app.component.ts:37 this is the parent ngAfterViewChecked method app.component.ts:40 this is the parent onDoCheck method app.component.ts:27 this is the parent ngAfterContentChecked method app.component.ts:34 this is the child onDoCheck method child.component.ts:22 this is the child ngAfterContentChecked method child.component.ts:28 this is the child ngAfterViewChecked method child.component.ts:34 this is the parent ngAfterViewChecked method app.component.ts:40