HiDocs

1.生命周期大全

官方文档：https://www.angular.cn/guide/lifecycle-hooks

生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。

当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些

生命周期钩子方法。

2.定义引入的方法

1.可以实现生命周期接口（多个）

注意：但是这个写不写都行，不写也可以直接在类里面使用生命周期函数

写了的话就会更加严格规范一些！

2.直接使用生命周期函数

3.测试每个钩子

html

<h2>{{msg}}</h2>

<button (click)="changeMsg()">改变msg的值</button>

<input type="text" [(ngModel)]="userinfo" />

import { Component, Input, OnInit, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  templateUrl: './lifecycle.component.html',
  styleUrls: ['./lifecycle.component.scss'],
})
export class LifecycleComponent implements OnInit, AfterViewInit {
  @Input('title') title: any;

  public msg: string = '我是一个生命周期演示';

  public userinfo: string = '';

  public oldUserinfo: string = '';

  constructor() {
    console.log(
      '00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做'
    );
  }

  ngOnChanges() {
    console.log(  // 只有有父子组件传值的时候并且值产生变化了才调用
      '01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(有父子组件传值的时候会触发)'
    );
  }
  ngOnInit() {
    console.log('02ngOnInit执行了--- 请求数据一般放在这个里面'); // 只有首次调用 ——> 相当于created钩子
  }
  ngDoCheck() {
    //写一些自定义的操作，比如数据改变了就做什么操作，没改变又做什么操作！
    console.log(
      '03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应' // 首次和每次更新的时候会调用
    );
    //只要定义了 old+变量名 的这种变量，就会自动获取旧值了！
    if (this.userinfo !== this.oldUserinfo) {
      console.log(`你从${this.oldUserinfo}改成${this.userinfo}`);
      this.oldUserinfo = this.userinfo;
    } else {
      console.log('数据没有变化');
    }
  }
  ngAfterContentInit() {
    console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用'); // 只有首次调用
  }
  ngAfterContentChecked() {
    console.log(
      '05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用' // 首次和每次更新的时候会调用（可以当做updated钩子使用）
    );
  }
  ngAfterViewInit(): void {
    console.log(
      '06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）' // 只有首次调用 ——> 相当于mounted钩子
    );
  }
  ngAfterViewChecked() {
    console.log(
      '07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用' // 首次和每次更新的时候会调用——> 相当于updated钩子
    );
  }

  ngOnDestroy() {
    console.log('08ngOnDestroy执行了····'); // 只有销毁之前调用（比如*ngIf为false的时候就会卸载） ——> 相当于beforeDestroy钩子
    //可以做保存数据，清除定时器、监听器等操作
  }

  //自定义方法
  changeMsg() {
    this.msg = '数据改变了';
  }
}

总结：只要是带check的，都是每次更新都调用的！！！

基本流程就是：数据 ——> 内容投影 ——> 视图

每一个步骤都需要经过init和checked两个步骤

最后再加上constructor和ngOnDestroy，以及有父子传值时候的ngOnChanges

内容投影什么意思？注意：相当于是插槽

内容投影（Content Projection），也称为内容投影或ng-content，是 Angular 中一种非常有用的特性，它允许你将组件的内容嵌入到另一个组件中，并在目标组件的模板中显示这些内容。这使得你可以创建可复用的组件，让组件的外部用户可以自定义其内容，从而实现更大的灵活性和可重用性。

以下是内容投影的关键概念和用法：

投影标签：在组件模板中，你可以使用 <ng-content></ng-content> 标签来表示内容投影的插槽。这个标签告诉 Angular：在这里显示外部组件传递进来的内容。
父组件和子组件：通常，内容投影涉及到两个组件，一个父组件和一个子组件。父组件包含一个或多个子组件，并通过内容投影将内容传递给子组件。
父组件中的内容：父组件的模板可以包含任何内容，包括文本、HTML 元素、其他组件等。这些内容可以被传递给子组件进行显示。
子组件中的投影插槽：子组件的模板中使用 <ng-content></ng-content> 标签来定义一个或多个投影插槽。这些插槽对应父组件中的内容，并决定了内容在子组件中的显示位置。
内容投影的使用：通过在父组件中包含子组件，并在子组件标签内包含内容，你可以将内容投影到子组件中。这样，子组件的模板中的投影插槽会显示父组件中的内容。

示例：

父组件模板 (parent.component.html):

html

<app-child>
  <h1>Hello from Parent</h1>
  <p>This is some content from the parent component.</p>
</app-child>

子组件模板 (child.component.html):

html

<div>
  <h2>Child Component</h2>
  <ng-content></ng-content> <!-- 投影插槽 -->
</div>

在上述示例中，父组件中包含了子组件 <app-child>，并在子组件标签内包含了一些内容。子组件的模板中使用了 <ng-content></ng-content> 插槽来显示父组件中的内容。这样，父组件的内容就被投影到了子组件中。

内容投影允许你创建高度可定制的组件，使得组件的用户可以在外部定义和控制组件的一部分或全部内容。这在创建复杂的界面元素和可重用的 UI 组件时非常有用。

1.生命周期大全 ​

2.定义引入的方法 ​

3.测试每个钩子 ​

1.生命周期大全

2.定义引入的方法

3.测试每个钩子