生命周期函数

主要理解ngOnInit，ngAfterViewInit，ngOnDestroy周期函数

使用 ngOnInit() 有两个原因：
- 在构造函数之后马上执行复杂的初始化逻辑
- 在 Angular 设置完输入属性之后，对该组件进行准备
ngAfterViewInit()
- 初始化完组件视图及其子视图之后调用,只调用一次
- 建议dom操作放在这里面
ngOnDestroy()
- 每次销毁指令/组件之前调用并清扫
- 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。

每次初始化加载以及改变数据时,ngDoCheck,ngAfterContentChecked,ngAfterContentChecked都会执行一次

<!-- 子组件 -->
<p>msg:{{msg}}</p>
<button (click)="changeMsg()">改变msg数据</button>
<div>
  <input type="text" [(ngModel)]="userInfo">
</div>

1
2
3
4
5
6

// 子组件
import { Component, OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  templateUrl: './lifecycle.component.html',
  styleUrls: ['./lifecycle.component.less']
})
export class LifecycleComponent implements OnInit {
  @Input('title')title:string;
  public msg:string = '我是一条数据'
  public userInfo:string;
  public olduserInfo:string;
  constructor() {
    console.log('0/构造函数执行了--除了使用简单的值对局部变量进行初始化之外，什么都不应该做')
  }
  ngOnChanges(){
    console.log('1/ngOnChanges执行了--当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)')
    
  }
  ngOnInit() { //!重要
    console.log('2/ngOnInit执行了--请求数据一般放在这个里面')
  }
  ngDoCheck(){
    console.log('3/ngDoCheck执行了--检测，并在发生Angular无法或不愿意自己检测的变化时作出反应')
    if(this.userInfo!==this.olduserInfo){
      console.log(`你从${this.olduserInfo}改成${this.userInfo}`)
      this.olduserInfo = this.userInfo
    } else {
      console.log('数据没有变化')
    }
  }

  ngAfterContentInit(){
    console.log('4/ngAfterContentInit执行了--当把内容投影进组件之后调用')
  }
  ngAfterContentChecked() {
    console.log('5/ngAfterContentChecked执行了--每次完成被投影组件内容的变更检测之后调用')
  
  }

  ngAfterViewInit() {  //! 重要
    console.log('6/ngAfterViewInit执行了--初始化完组件视图及其子视图之后调用(dom操作放在这个里面)')
  }
  ngAfterViewChecked() {
    console.log('7/ngAfterViewChecked执行了--每次做完组件视图和子视图的变更检测之后调用')
  }

  ngOnDestroy() { //! 重要
    console.log('08ngOnDestroy执行了--销毁指令/组件之前调用');
  }
  changeMsg(){
    this.msg = '数据改变了'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!-- 调用子组件 -->
<app-lifecycle [title]='title' *ngIf="flag"></app-lifecycle>
<button (click)="changeTitle()">改变title</button>
<button (click)="changeFlag()">挂载销毁组件</button>

1
2
3
4

  title = 'my-app';   //定义属性
  flag:boolean = true;
  changeTitle() {
    this.title='该改变title'
  }
  changeFlag() {
    this.flag = !this.flag
  }

1
2
3
4
5
6
7
8

← 父子组件以及组件之间通讯异步获取数据Rxjs基础使用 →

# 生命周期函数

生命周期函数