angualr4基础之组件生命周期

组件生命周期

//这个顺序是按照执行的先后排列的
constructor：构造器函数，一般用于注入服务
ngOnChanges：检测到输入数据变化，首次触发发生在ngOnInit前。注意对象的属性发生变化时监听不到
ngOnInit：组件初始化，通常会设置一些初始值
ngDoCheck：手动触发更新检查 
ngAfterContentInit：内容初始化到组件之后
ngAfterContentChecked：内容变更检测之后
ngAfterViewInit：视图 初始化之后
ngAfterViewChecked：视图发生变化检测之后，这个可以用来保证用户视图的及时更新
ngOnDestroy：组件注销时的清理工作，通常用于移除事件监听，退订可观察对象等

• ngOnChanges
  
  • 在父组件初始化或修改子组件的输入参数时调用。

import { Component } from '@angular/core';
@Component({...})
export class AppComponent {greeting:string  = "Hello";//当这个对象变更时,会调用子组件的ngonchange钩子user:{name:string} = {name: "Tom"};//当name变更时，不会调用子组件的ngonchange钩子，因为他变更的是name属性而不是user对象。constructor(){
}
}

<div class="parent"><h2>我是父组件h2><div>问候语:<input type="text" [(ngModel)]="greeting">//双向绑定div><div>姓名:<input type="text" [(ngModel)]="user.name">//双向绑定div><app-child [greeting]="greeting" [user]="user">app-child>//将值传入子组件，当值改变时会调用子组件的ngonchange钩子
div>

• 变更检测 ngDoCheck (依赖于zone.js)
  
  • Default策略
  • OnPush策略
• 所有的事件都会触发变更检测机制，不分原生还是自己写的
• 所有带有check字样的钩子都会这样，只要有一点变动就会调用。除非这个组件被销毁。（在两个input框之间切换都回调用）

//跟上边的代码一样，但是当name改变时，也会调用ngDoCheck方法钩子。
import {Component, OnInit, Input, OnChanges, SimpleChanges, DoCheck} from '@angular/core';
@Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges, DoCheck {@Input()greeting:string;@Input()user:{name:string};message:string = "初始化消息";oldUsername:string;changeDetected:boolean = false;noChangeCount:number = 0;constructor() { }ngOnInit() {}ngOnChanges(changes: SimpleChanges): void {console.log(JSON.stringify(changes, null, 2));}ngDoCheck(): void {//子组件里的变更检测，if(this.user.name !== this.oldUsername) {this.changeDetected = true;console.log("DoCheck:user.name从"+this.oldUsername+"变为"+this.user.name);this.oldUsername = this.user.name;}if(this.changeDetected) {this.noChangeCount = 0;}else{this.noChangeCount = this.noChangeCount + 1;console.log("DoCheck:user.name没变化时ngDoCheck方法已经被调用"+this.noChangeCount+"次")}this.changeDetected = false;}
}

• View钩子
  
  • 在父组件里可以通过@ViewChild获得子组件的引用。调用子组件方法

//要想执行这个，必须等子组件全部加载完毕。console.log("父组件的视图初始化完毕");//在ngAfterViewInit里边不能写赋值等操作，要想进行这些操作必须写在settimeout里边setTimeout(() => {   this.message = "Hello";},0);}ngAfterViewChecked(): void {console.log("父组件的视图变更检测完毕");}ngOnInit(): void {setInterval(() => {this.child1.greeting("Tom");//调用子组件里的方法}, 5000);}

import {Component, OnInit, AfterViewChecked, AfterViewInit} from '@angular/core';
@Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, AfterViewInit,AfterViewChecked {ngAfterViewInit(): void {console.log("子组件的视图初始化完毕");}ngAfterViewChecked(): void {console.log("子组件的视图变更检测完毕");}constructor() { }ngOnInit() {}greeting(name:string) {console.log("hello "+name);}
}

• ngConent指令
• ngConent指令用于子组件，可以将父组件的内容投影到子组件

<app-child>
<div class="header">这是头部，这个div是父组件投影到子组件的div
<div class="footer">这是底部，这个div是父组件投影到子组件的div>
app-child>

<ng-content select=".header">ng-content>
<ng-content select=".footer">ng-content>

• AfterContentInit,
  AfterContentChecked, AfterViewInit

父组件
//在这里边可以对属性内容进行变更
ngAfterContentInit(): void {console.log("父组件投影内容初始化完毕");//1this.message = "hello world";}ngAfterContentChecked(): void {console.log("父组件投影内容变更检测完毕");//2}ngAfterViewInit(): void {console.log("父组件视图内容初始化完毕");//5}子组件ngAfterContentInit(): void {console.log("子组件投影内容初始化完毕");//3this.message = "hello world";}ngAfterContentChecked(): void {console.log("子组件投影内容变更检测完毕");//4}

• 销毁ngOnDestroy
• 在路由跳转时会执行的钩子。销毁之前的组件。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！