Angular 个人深究(四)【生命周期钩子】
Angular 个人深究(四)【生命周期钩子】
定义:
每个组件都有一个被 Angular 管理的生命周期。
Angular 创建它,渲染它,创建并渲染它的子组件,在它被绑定的属性发生变化时检查它,并在它从 DOM 中被移除前销毁它。
Angular 提供了生命周期钩子,把这些关键生命时刻暴露出来,赋予你在它们发生时采取行动的能力。
除了那些组件内容和视图相关的钩子外,指令有相同生命周期钩子。
概览:
ngOnChanges() |
当 Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 |
ngOnInit() |
在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 |
ngDoCheck() |
检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。 在每个 Angular 变更检测周期中调用, |
ngAfterContentInit() |
当把内容投影进组件之后调用。 第一次 |
ngAfterContentChecked() |
每次完成被投影组件内容的变更检测之后调用。
|
ngAfterViewInit() |
初始化完组件视图及其子视图之后调用。 第一次 |
ngAfterViewChecked() |
每次做完组件视图和子视图的变更检测之后调用。
|
ngOnDestroy() |
当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。 在 Angular 销毁指令/组件之前调用。 |
范例:
ngOnChanges()、ngInit
test2.component.ts
// test2.component.ts: import { Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-test2',
templateUrl: './test2.component.html',
styleUrls: ['./test2.component.css']
})
//需要继承 OnInit、OnChanges 接口
export class Test2Component implements OnInit OnChanges{
// 两个input 来自 父组件 test1
@Input() test2_value1: string;
@Input() test2_value2: string;
constructor() { }
ngOnInit() {
//判断 ngOnInit的执行顺序
console.log("这里执行ngOnInit");
}
ngOnChanges(changes:SimpleChanges){
console.log(changes);
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
console.log(`${propName}: 新值 = ${cur}, 旧值 = ${prev}`);
}
}
}
test1.component.html
<!-- test1.component.html -->
<p>
test1 works!
</p>
<label> test1 value</label>
<input type="text" [(ngModel)]="test1_value1" >
<input type="text" [(ngModel)]="test1_value2" >
<!-- 将test1_value1的值给test2_value1... -->
<app-test2 [test2_value1]="test1_value1" [test2_value2]="test1_value2"></app-test2>
结果:
说明:
- 刚刷新页面时,将test2_value1、test2_value2的值 从 undefined 变成 1、2。
- 页面更改test1_value1,将test2_value1的值 从 1 变成 11。
- 以此类推, 可以使用 ngOnChanges对值发生变化时进行处理。
- ngInit 的执行顺序在 ngOnChanges之后,可以做一下初始化的工作
ngDoCheck()
test2.component.ts
import { Component, OnInit,Input,OnChanges,DoCheck} from '@angular/core';
@Component({
selector: 'app-test2',
templateUrl: './test2.component.html',
styleUrls: ['./test2.component.css']
})
//需要实现 DoCheck 接口
export class Test2Component implements OnInit OnChanges DoCheck{
@Input() test2_value1: string;
@Input() test2_value2: string;
constructor() { } ngOnInit() {
//console.log("这里执行ngOnInit");
}
ngOnChanges(changes:SimpleChanges){
//console.log(changes);
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
//console.log(`${propName}: 新值 = ${cur}, 旧值 = ${prev}`);
}
}
ngDoCheck(){
console.log("执行ngDoCheck");
}
}
结果:
说明:
- 刷新页面的时候,执行了两次。
- 每次鼠标放到,input框上就会执行一次
- 更改input值,也会执行一次,开销非常大。慎用!
ngAfterContentInit()
app.component.ts
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
//templateUrl: './app.component.html',
//在app主组价中,将test2组件放到test1组件中,
template: `<app-test1>
<app-test2></app-test2>
</app-test1>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
test1.component.ts
import { Component, OnInit,OnChanges} from '@angular/core'; @Component({
selector: 'app-test1',
//templateUrl: './test1.component.html',
//ng-content指定的是外来的组件 在组件app中定义的 test2组件
//同样在test1组件中,也增加test2 组件
template: `<div> <ng-content></ng-content> <app-test2></app-test2> </div>`,
styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit, OnChanges{
test1_value1:string;
test1_value2:string;
constructor() { } ngOnInit() {
this.test1_value1="1"
this.test1_value2="2"
}
ngOnChanges(){
console.log("onchange");
}
}
test2.component.ts
import { Component, OnInit,Input ,OnChanges,DoCheck,SimpleChanges,AfterContentInit} from '@angular/core';
@Component({
selector: 'app-test2',
templateUrl: './test2.component.html',
styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit,OnChanges,DoCheck,AfterContentInit{
@Input() test2_value1: string;
@Input() test2_value2: string;
constructor() { } ngOnInit() {
//console.log("这里执行ngOnInit");
}
ngOnChanges(changes:SimpleChanges){
//console.log(changes);
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
//console.log(`${propName}: 新值 = ${cur}, 旧值 = ${prev}`);
}
}
ngDoCheck(){
console.log("执行ngDoCheck");
}
ngAfterContentInit(){
console.log("执行ngAfterContentInit");
}
}
结果:
说明:
- ngAfterContentInit会在外来内容被投影到组件中之后 调用,也就是说当test2组件以html的形式投影到test1组件之后执行,
- 因为使用两种方式进行投影了两次,所以ngAfterContentInit执行了两次
- 其他操作只会增加ngDoCheck的次数,并没有增加ngAfterContentInit的次数
ngAfterContentCheck()
test2.component.ts
import { Component, OnInit,Input ,OnChanges,DoCheck,SimpleChanges,AfterContentInit,AfterContentCheck} from '@angular/core';
@Component({
selector: 'app-test2',
templateUrl: './test2.component.html',
styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit,OnChanges,DoCheck,AfterContentInit,AfterContentCheck{
@Input() test2_value1: string;
@Input() test2_value2: string;
constructor() { } ngOnInit() {
//console.log("这里执行ngOnInit");
}
ngOnChanges(changes:SimpleChanges){
//console.log(changes);
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
//console.log(`${propName}: 新值 = ${cur}, 旧值 = ${prev}`);
}
}
ngDoCheck(){
console.log("执行ngDoCheck");
}
ngAfterContentInit(){
console.log("执行ngAfterContentInit");
}
ngAfterContentChecked(){
console.log("执行ngAfterContentChecked");
}
}
结果:
说明:
- 在执行ngDoCheck之后 一定会执行一次ngAfterContentInit
- 每次完成被投影组件内容的变更检测之后调用
- 其他代码没贴出来,就是跟上一个是一样的
ngAfterViewInit()
test1.component.ts
import { Component, OnInit,OnChanges,ViewChild} from '@angular/core';
import {Test2Component} from "../test2/test2.component" @Component({
selector: 'app-test1',
//templateUrl: './test1.component.html',
template: `<div> <input type="text" [(ngModel)]="test1_value1" >
<input type="text" [(ngModel)]="test1_value2" ><ng-content></ng-content>
<app-test2 [test2_value1]="test1_value1" [test2_value2]="test1_value2"></app-test2> </div>`,
styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit, OnChanges{
test1_value1:string;
test1_value2:string;
constructor() { }
@ViewChild(Test2Component);
ngOnInit() {
this.test1_value1="1"
this.test1_value2="2"
}
ngOnChanges(){
console.log("onchange");
}
}
test2.component.ts
import { Component, OnInit,Input ,OnChanges,DoCheck,SimpleChanges,AfterContentInit,AfterContentCheck, AfterViewChecked, AfterViewInit} from '@angular/core';
@Component({
selector: 'app-test2',
templateUrl: './test2.component.html',
styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit,OnChanges,DoCheck,AfterContentInit,AfterContentCheck ,AfterViewChecked, AfterViewInit{
@Input() test2_value1: string;
@Input() test2_value2: string;
constructor() { } ngOnInit() {
//console.log("这里执行ngOnInit");
}
ngOnChanges(changes:SimpleChanges){
//console.log(changes);
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
//console.log(`${propName}: 新值 = ${cur}, 旧值 = ${prev}`);
}
}
ngDoCheck(){
console.log("执行ngDoCheck");
}
ngAfterContentInit(){
console.log("执行ngAfterContentInit");
}
ngAfterContentChecked(){
console.log("执行ngAfterContentChecked");
}
ngAfterViewInit(){
console.log("执行ngAfterViewInit");
}
}
结果:
说明:
- 在每次创建了组件的子视图后调用,每次在test1组件中创建test2组件时都会调用,
- 在test1组件中,需要使用@ChildView 装饰器,将test2component装饰一下
ngAfterViewChecked
test2.component.ts
import { Component, OnInit,Input ,OnChanges,DoCheck,SimpleChanges,AfterContentInit,AfterContentCheck, AfterViewChecked, AfterViewInit} from '@angular/core';
@Component({
selector: 'app-test2',
templateUrl: './test2.component.html',
styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit,OnChanges,DoCheck,AfterContentInit,AfterContentCheck ,AfterViewChecked, AfterViewInit{
@Input() test2_value1: string;
@Input() test2_value2: string;
constructor() { } ngOnInit() {
//console.log("这里执行ngOnInit");
}
ngOnChanges(changes:SimpleChanges){
//console.log(changes);
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
//console.log(`${propName}: 新值 = ${cur}, 旧值 = ${prev}`);
}
}
ngDoCheck(){
console.log("执行ngDoCheck");
}
ngAfterContentInit(){
console.log("执行ngAfterContentInit");
}
ngAfterContentChecked(){
console.log("执行ngAfterContentChecked");
}
ngAfterViewInit(){
console.log("执行ngAfterViewInit");
}
ngAfterViewChecked(){
console.log("执行ngAfterViewChecked");
}
}
结果:
说明:
- 上图红色框是,页面刷新完后执行的ngAfterViewChecked,前两次是伴随init一起的,后面两个是,test1给test2赋值导致的
- 上图绿色框是,更改test1中的一个值,导致了更改了test2的值执行的ngAfterViewChecked
- 我再test1组件的两个input上,鼠标焦点来回切换时,同样也会执行ngAfterViewChecked,还是慎用这个钩子函数吧
OnDestroy
test1.component.ts
import { Component, OnInit,OnChanges,ViewChild} from '@angular/core';
import {Test2Component} from "../test2/test2.component" @Component({
selector: 'app-test1',
//templateUrl: './test1.component.html',
template: `
<div>
<input type="text" [(ngModel)]="test1_value1" >
<input type="text" [(ngModel)]="test1_value2" >
<ng-content></ng-content>
<app-test2 [test2_value1]="test1_value1" [test2_value2]="test1_value2">
</app-test2>
<div *ngFor="let test of tests" appTest4 class="tests">
{{test}}
</div>
<input type="button"value="add" (click)="addDiv()">
<input type="button"value="delete"(click)="deleteDiv()">
</div>`,
styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit, OnChanges{
test1_value1:string;
test1_value2:string;
tests:any;
constructor() { }
@ViewChild(Test2Component) viewChild:Test2Component;
ngOnInit() {
this.test1_value1="1"
this.test1_value2="2"
this.tests=[1,2,3]
}
ngOnChanges(){
console.log("onchange");
}
addDiv(){
this.tests.push("1212");
}
deleteDiv(){
this.tests=[];
}
}
test4.directive.ts
import { Directive, OnInit, OnDestroy } from '@angular/core'; @Directive({
selector: '[appTest4]'
})
export class Test4Directive implements OnInit, OnDestroy{ constructor() { }
ngOnInit() { console.log("test4 directive ngOnInit")} ngOnDestroy() { console.log("test4 directive ngDestroy");}
}
结果:
说明:
- 建立一个directive来 监测test1 组件中的 div的生成与销毁
- 开始有默认的三个值,所有ngOnInit执行了三次
- 添加一个值,又执行一次ngOnInit
- 删除所有的值,执行了4次ngDestroy
总结:
由于生命周期的存在,angular提供了众多的生命周期的钩子,让我们能够很好的在发生变化的时候进行处理。
Angular 个人深究(四)【生命周期钩子】的更多相关文章
- Angular 组件通讯、生命周期钩子 小结
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7986858.html http://www.cnblogs ...
- angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别
angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks 文档中做了介绍. ngOnInit() 在 Angular 第一次显示数据 ...
- Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅
Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...
- Angular组件生命周期——生命周期钩子
生命周期钩子介绍: 1.ngOnChange:响应组件输入值发生变化时触发的事件. 2.ngOnInit:用于数据绑定输入属性之后初始化组件,在第一次ngOnChange之后被调用. a. 组件构造后 ...
- Vue学习之生命周期钩子小结(四)
一.生命周期钩子(函数): 1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运 ...
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- Angular4学习笔记(九)- 生命周期钩子简介
简介 Angular 指令的生命周期,它是用来记录指令从创建.应用及销毁的过程.Angular 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作.Angular ...
- Angular2 -- 生命周期钩子
组件生命周期钩子 指令和组件的实例有一个生命周期:新建.更新和销毁. 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit. ...
- Angular25 组件的生命周期钩子
1 生命周期钩子概述 组件共有9个生命周期钩子 1.1 生命周期的执行顺序 技巧01:测试时父组件传递对子组件的输入属性进行初始化操作 import { Component, Input, Simpl ...
随机推荐
- 【文件】java生成PDF文件
package test; import java.awt.Color; import java.io.FileOutputStream; import org.junit.Test; import ...
- HTTP 协议报文解析
说明转载自https://blog.csdn.net/chf1142152101/article/details/74162755 本篇主要是为了记录HTTP中报文的格式,以便针对报文进行解析.首先会 ...
- Kali2.0第一节
kali2.0很好的做了工具缩减,以及图形处理,重要的是msf更快了!汉化也远远超过了1.0 如果想要汉化,选择设置里面的Region&language 将language选择设置为中文,注 ...
- python去重(针对密码)
#coding:utf-8 #author:Blood_Zero import re tmp_list=[] f=open("E:/ASP.txt","r") ...
- JXL导出Excel(只支持xls版本)——(一)
注意: 导出的后缀是xls可以直接打开,如果导出的后缀是xlsx打开报错,需要手动将名字改为xls才可以打开.也就是JXL不可以导出xlsx的excel. Jar包
- 【CTF MISC】隐写术wireshark找出图片-“强网杯”网络安全挑战赛writeup
这场CTF中有一道题是分析pcap包的.. 13.大黑阔: 从给的pcap包里把图片提取出来,是一张中国地图. 题目提示是黑阔在聊天,从数据里可以找出几段话. 思路:主要考察wireshark的过滤规 ...
- 深入分析Linux自旋锁【转】
转自:http://blog.chinaunix.net/uid-20543672-id-3252604.html 前言: 在复习休眠的过程中,我想验证自旋锁中不可休眠,所以编写了一个在自旋锁中休眠的 ...
- grep用法【转】
简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...
- 用nodejs搭建BS环境
var http = require('http'); http.createServer(function (req, res) {res.writeHead(200, {'Content-Type ...
- Tomcat启动项目时内存溢出问题如何解决
在Eclipse中,内存溢出(报不能创建JAVA虚拟机错时,也可能是这里配错了.) 1.双击Tomcat,点击Open launch configuration,Arguments, 2.在VM ar ...