Saltar al contenido

Angular del ciclo de vida engancha tutorialJun, 18thIn este tutorial, vamos a aprender acerca de los diferentes tipos de …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de los diferentes tipos de ganchos del ciclo de vida de los componentes proporcionados por el angular.

ciclo de vida de ganchos ganchos

ciclo de vida son diferentes métodos que se invocan en diferentes fases de la creación de componentes a la destrucción.

ngOnInit

Este gancho ciclo de vida se llama cuando un componente se inicializa todas sus propiedades enlazado a datos.

ejemplo:

import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
ngOnInit() { console.log('ngOninit lifecycle hook is called'); }
}

A el código anterior, primero, se importó el gancho ciclo vital OnInit del @ angular / núcleo packageand invocada dentro AppComponent.

ngOnChanges

()

Este gancho ciclo de vida se llama cuando un restablece componentes es propiedades de entrada de enlace de datos y que recibe un objeto SimpleChanges que contiene valor cambiado actual y el valor anterior.

ejemplo:

import { Component,Input,OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnChanges {
@Input() name: string;
ngOnChanges(data: SimpleChanges) { console.log(data); }}

Aquí hemos importado un Onchanges ciclo de vida de gancho y el objeto “SimpleChanges” del paquete @ / angular núcleo después se añadió a la ChildComponent.

{{name}}

Ahora estamos pasando los datos al componente secundario del componente de los padres mediante el uso de la propiedad del nombre de entrada.

import { Component,OnChanges } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
myname = 'sai';}

¿has visto en la anterior imagen de un objeto se registra en la consola con PreviousValue y CurrentValue?

ngDoCheck ()

Este gancho ciclo de vida se llama en cada detección de cambio que se pasó sobre el componente.

Nota: funciona inmediatamente después de ngOnchanges () y ngInIt ().

import { Component, Input, DoCheck } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements DoCheck {
@Input() name: string;

ngDoCheck() { console.log('do check is called'); }}

Nota: angular no se recomienda implementar ngOnchanges () y ngDoCheck () en el mismo componente.

ngAfterContentInit ()

Esto se llama cuando el contenido externo se proyecta en vista del componente.

Puedes retirar mi angular de proyección contenido de la guía

ngAfterContentChecked ()

esto se le llama después de ngAfterContentInit () y también se llama después de cada ciclo de detección de cambios.

ngDestroy ()

Este gancho se llama ciclo de vida antes de que el componente es destroyed.it es el mejor lugar para temporizadores claras o separar los controladores de eventos que nos impiden pérdidas de memoria.

Ejemplo:

import { Component,Input,OnDestroy } from '@angular/core';
export class ChildComponent implements OnDestroy {
@Input() name: string;

// it's called when a component is destroyed
ngOnDestroy() { console.log('destroy is called'); }}


Ahora bien, si el valor de entrada claro ngOnDestroy () de gancho se llama antes de componente secundario elimina de la dom.