面试题：Angular组件生命周期钩子函数在复杂业务场景下的应用

Question

假设你正在开发一个具有复杂交互的Angular应用，其中某个组件需要在初始化时进行大量数据的加载和处理，在销毁时需要清理一些资源并与后端进行交互以保存状态。请详细描述你会如何利用Angular组件的生命周期钩子函数（如ngOnInit、ngOnDestroy等）来实现这些功能，并且说明每个钩子函数执行的时机以及这样做的优势。

Answer 1

1. 使用 ngOnInit 钩子函数进行数据加载和处理

• 执行时机：当组件被初始化后，Angular第一次显示数据绑定和设置指令/组件的输入属性之后调用。
• 实现方式：在组件类中定义 ngOnInit 方法，在该方法中编写数据加载和处理的逻辑。例如，可以通过调用服务中的方法从后端获取数据，并进行必要的数据转换或预处理。

import { Component, OnInit } from '@angular/core';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css']
})
export class YourComponent implements OnInit {
  data: any[];

  constructor(private dataService: YourDataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe((response) => {
      this.data = response;
      // 在这里进行数据处理，比如过滤、排序等
      this.data = this.data.filter(item => item.someCondition);
      this.data.sort((a, b) => a.someProperty - b.someProperty);
    });
  }
}

• 优势：将数据加载和处理逻辑集中在 ngOnInit 方法中，使得组件的初始化逻辑清晰明了。同时，确保在组件真正显示在视图之前数据已经准备好，避免出现视图渲染时数据未加载完成的情况。

2. 使用 ngOnDestroy 钩子函数清理资源和与后端交互保存状态

• 执行时机：当指令销毁时调用，通常在组件从DOM中移除之前。
• 实现方式：在组件类中定义 ngOnDestroy 方法，在该方法中编写清理资源（如取消订阅可观察对象，防止内存泄漏）以及与后端交互保存状态的逻辑。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { YourDataService } from './your-data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  data: any[];
  private dataSubscription: Subscription;

  constructor(private dataService: YourDataService) {}

  ngOnInit() {
    this.dataSubscription = this.dataService.getData().subscribe((response) => {
      this.data = response;
    });
  }

  ngOnDestroy() {
    // 清理订阅
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
    // 与后端交互保存状态
    this.dataService.saveData(this.data).subscribe();
  }
}

• 优势：ngOnDestroy 确保在组件销毁时及时清理资源，避免内存泄漏。同时，通过在组件销毁时保存状态到后端，可以保证数据的完整性和一致性，当下次组件重新初始化时能够恢复到之前的状态。