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(){}}<!--html--><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获得子组件的引用。调用子组件方法

<!--父组件-->import {Component, OnInit, ViewChild, AfterViewInit, AfterViewChecked} from "@angular/core";import {ChildComponent} from "./child/child.component";@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit, AfterViewInit,  @ViewChild("child1")//引入子组件  child1:ChildComponent;//定义子组件对象  message:string;  constructor(){  }  ngAfterViewInit(): void {//要想执行这个，必须等子组件全部加载完毕。    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("父组件投影内容初始化完毕");//1    this.message = "hello world";  }  ngAfterContentChecked(): void {    console.log("父组件投影内容变更检测完毕");//2  }  ngAfterViewInit(): void {    console.log("父组件视图内容初始化完毕");//5  }  子组件  ngAfterContentInit(): void {    console.log("子组件投影内容初始化完毕");//3    this.message = "hello world";  }  ngAfterContentChecked(): void {    console.log("子组件投影内容变更检测完毕");//4  }

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