笔记大全

聊聊关于Angular中的生命周期

更新时间：2023-11-16

前言

Angular是一种现代化的Web前端框架。它具有生命周期，在组件和指令生命周期钩子函数中处理几乎所有东西。这使得开发人员可以根据自己的需要扩展和控制组件的生命周期。在这篇文章中，我们将讨论Angular中的生命周期和生命周期钩子。

第一段：Angular中的生命周期

在Angular中，每个组件都有一个生命周期，大致流程如下： 1. 创建组件 2. 渲染组件视图 3. 检测视图变化 4. 销毁组件这个生命周期过程中，Angular提供了一些钩子，让你的代码可以在不同的时候插入自定义逻辑。这些钩子函数分为以下三类： 1. ngOnInit: 在组件创建时调用，用于初始化数据 2. ngOnChange: 当组件的@Input数据发生改变时调用 3. ngOnDestroy: 在组件销毁时调用，用于做清理工作下面，我们将一个简单的组件的生命周期实现：

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

@Component({
  selector: 'app-lifecycle',
  template: `{{ name }}`
})
export class LifecycleComponent implements OnInit, OnChanges, OnDestroy {
  @Input() name: string;

  ngOnInit() {
    console.log('ngOnInit');
  }

  ngOnChanges() {
    console.log(`ngOnChanges: ${this.name}`);
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
  }
}

第二段：ngOnInit详解

Angular中的ngOnInit生命周期钩子函数在每个组件创建时调用。在这个阶段，我们通常用来初始化组件变量，调用服务，或者从其他组件或服务器端请求数据。因此，ngOnInit是一个组件呈现之前的完美时机。下面是一个在ngOnInit方法中初始化的简单例子：

export class MyComponent implements OnInit {
  name: string;

  ngOnInit() {
    this.name = 'Angular';
  }
}

第三段：ngOnChanges详解

ngOnChanges钩子函数在组件中@Input变量值发生变化时调用。这意味着，在许多方面，ngOnChanges是您的应用程序中最重要的生命周期钩子之一。请注意，使用ngOnChanges时，您必须在组件中import { OnChanges }，并实现OnChanges接口。下面是一个简单的例子:

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

@Component({
  selector: 'app-child',
  template: `{{ name }}`
})
export class ChildComponent implements OnChanges {
  @Input() name: string;

  ngOnChanges() {
    console.log(`ngOnChanges: ${this.name}`);
  }
}

@Component({
  selector: 'app-parent',
  template: `
    
    
  `
})
export class ParentComponent {
  name = 'Angular';

  changeName() {
    this.name = 'React';
  }
}

在上述代码中，@Input属性是由父组件传递给子组件的。而ngOnChanges钩子函数将在父组件中改变时被调用，此处为name属性。

第四段：ngOnDestroy详解

ngOnDestroy生命周期钩子函数是在Angular组件被销毁之前调用。这是用来执行一些清理代码的机会，例如解除订阅，清理定时器等。通过这些操作，您可以确保组件不会滥用内存或资源。下面是一个简单的例子：

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

@Component({
  selector: 'app-my',
  template: 'The component is being destroyed'
})
export class MyComponent implements OnInit, OnDestroy {
  intervalId: number;

  ngOnInit() {
    this.intervalId = setInterval(() => {
      console.log('running...');
    }, 1000);
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
  }
}

在上述代码中，当组件被销毁时，我们清除了定时器的操作。这会确保不会在组件被销毁后继续运行。

总结

Angular是一种现代化的Web前端框架。它具有一系列的生命周期钩子，这些钩子函数在组件生命周期不同的阶段调用，允许我们注入一些自己的逻辑代码。 ngOnInit生命周期钩子在每个组件创建时调用，通常用于初始化数据。ngOnChanges钩子函数在组件中@Input变量值发生变化时调用，此时，您必须在组件中import { OnChanges }，并实现OnChanges接口。ngOnDestroy生命周期钩子函数是在Angular组件被销毁之前调用，通过这个函数可以确保组件不会滥用内存或资源。

c语言编程笔录