面试题：Angular组件生命周期钩子的应用场景

ngOnInit

应用场景：在组件初始化后执行一次性的操作，例如初始化数据、订阅服务等。在这个钩子函数中，组件的输入属性已经被初始化，此时可以安全地访问和操作它们。
示例：假设我们有一个组件需要从服务中获取用户数据并显示。

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user: any;
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUser().subscribe(data => {
      this.user = data;
    });
  }
}

ngOnDestroy

应用场景：在组件销毁之前执行清理操作，例如取消订阅可观察对象、清除定时器等，以避免内存泄漏。
示例：如果组件订阅了一个可观察对象，在组件销毁时需要取消订阅。

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnDestroy {
  data: any;
  subscription: Subscription;
  constructor(private dataService: DataService) {}

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

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

ngAfterViewInit

应用场景：在组件的视图及其子视图初始化完成后执行操作，通常用于需要操作DOM元素的场景，因为此时视图已经渲染完毕，可以安全地访问和操作DOM。
示例：假设我们有一个需要对特定DOM元素进行聚焦的组件。

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-input-focus',
  templateUrl: './input-focus.component.html',
  styleUrls: ['./input-focus.component.css']
})
export class InputFocusComponent implements AfterViewInit {
  @ViewChild('inputElement') inputElement: ElementRef;

  ngAfterViewInit() {
    this.inputElement.nativeElement.focus();
  }
}

<!-- input-focus.component.html -->
<input #inputElement type="text">

星途面试题库

面试题：Angular组件生命周期钩子的应用场景

知识考点

面试题答案

ngOnInit

ngOnDestroy

ngAfterViewInit