角度循环钩角2个组件

Tavish Aggarwal.

 

I

我之前的帖子,我已经解释了Angular 2  组件 详细。为什么我们需要组成部分以及它到底是什么? 

 

现在让我们了解更多有关组件生命周期挂钩的更多信息,并查看详细说明组件生命周期的一些代码。让我们开始吧。

组件生命周期由角度本身管理。组件生命周期包括以下阶段:

  1. 创造
  2. 使成为
  3. 创建和渲染孩子
  4. 流程发生变化
  5. 破坏

 

请参考下图所示的图表:

 

组件生命周期

 

 

让我在角度1.x中用一个例子解释你,我们如何利用组件的生命周期。

如果您在Angular 1.x中记得,我们使用NgCloak隐藏数据渲染之前的插值。但现在处于Angular 2.x,我们有生命周期,我们可以轻松管理它。

现在让我们详细了解组件生命周期。但之前,让我解释组件中的构造函数,因为它是潜入生命周期之前的重要组成部分。

组件构造函数

每个组件ha一个构造函数。参考如下所示的示例:

import { Component } from '@angular/core'
import { TextService } from './service/TextService'

@Component({
    selector: 'my-products',
    templateURL: 'app/products/product-list.component.html'
})

export class ProductListComponent { 
        text: string;
        constructor (private text: TextService) {
           this.text = TextService.getText();
        }
}

请注意,在任何其他组件生命周期挂钩之前调用组件的构造函数。如果我们的组件有任何情况,也可以放置构造函数以注入依赖性。 

例如,我们的ProductListComponent依赖于TextService。因此,我们需要在构造函数中导入服务并注入。这是依赖注入在Angular 2.x中的工作方式。

现在,我们了解构造函数,所以让我们前进并了解组件生命周期。

组件基本上有四个阶段。这些都是:

  1. ngoninit.
  2. ngonchanges.
  3. ngondestroy
  4. ngdocheck.

每个接口都有一个单个钩子方法,其名称是与NG前缀的接口名称。例如,`oninit`接口有一个名为`ngoninit()`的钩方法。

让我们详细看看每个阶段:

ngoninit.

这是一旦组件初始化后执行的阶段。此挂钩仅调用一次。请参阅下面的代码,以查看挂钩的既何种方式。

import { Component } from '@angular/core'
import { TextService } from './service/TextService'
import { OnInit } from '@angular/core'

@Component({
    selector: 'my-products',
    templateURL: 'app/products/product-list.component.html'
})

export class ProductListComponent implements OnInit{ 
        text: string;
        constructor (private text: TextService) {
           this.text = TextService.getText();
        }
        ngOnInit() { console.log('Component Initialized'); }
}

正如您在上面的代码中看到,我们首先需要实现一个接口在上面的情况下oninit。然后我们有一个函数ngoninit(),它将在初始化组件后立即执行。

此外,请注意,NgonInit更好地初始化组件,然后是构造函数,因为在NgonInit中是初始化所有输入属性的阶段。

ngonchanges.

这是每次在输入属性的变化时调用的挂钩。

import { Component } from '@angular/core'
import { TextService } from './service/TextService'
import { OnChanges } from '@angular/core'

@Component({
    selector: 'my-products',
    templateURL: 'app/products/product-list.component.html'
})

export class ProductListComponent implements OnChanges{ 
        text: string;
        @Input() name: string;

        constructor (private text: TextService) {
           this.text = TextService.getText();
        }
        ngOnChanges( changes: productChanges) {
             if(changes) { this.text = 'Value changed' }
        }
}

ngondestroy

这是一个钩子,就在角度破坏了组件之前。这是最好的清理活动,如脱离事件处理程序,以避免内存泄漏。

import { Component } from '@angular/core'
import { TextService } from './service/TextService'
import { OnInit, OnDestroy } from '@angular/core'

@Component({
    selector: 'my-products',
    templateURL: 'app/products/product-list.component.html'
})

export class ProductListComponent implements OnInit, OnDestroy { 
        text: string;
        constructor (private text: TextService) {
           this.text = TextService.getText();
        }
        ngOnInit() { console.log('Component Initialized'); }

        ngOnDestroy() { console.log('Component is destroyed'); }
}

ngdocheck.

调用onchanges时调用此功能。这是由Angular提供的,以写入我们的检测算法。我们大多数写入angular无法自行检测的变更检测。

请注意,它应该在组件中一起实现NGONCHANGES和NGDOCHECK。 

以下是NgdoCheck的儿童钩子,并且仅特定于组件。参考 关联 了解更多关于下面的钩子。

  1. ngaftercontentinit.
  2. ngaftercontentchecked
  3. ngafterviewinit.
  4. ngafterviewchecked

所以总结,

使用组件生命周期,我们可以轻松更改初始化,更新和销毁时的组件行为。并且基于代码中的可用性,我们主要使用NgonInit,因为它比构造函数更优先,其次是Ngonchange,然后是Ngondestroy。除了这三个之外,您几乎不需要使用其他组件生命周期挂钩。

作者信息

Tavish Aggarwal.

网站: http://tavishaggarwal.com

是一个数据科学家 在一个海德拉巴工作,具有广泛的经验,在跨电子商务,财务,医疗保健等等不同领域解决现实世界的业务问题。 他对技术充满热情,喜欢在团队中工作。

类别