Angular 5组件初始/重新显示的生命周期钩子选型问询

嘿，我来帮你梳理清楚这个问题！你想找能绑定组件初始显示和重新显示逻辑的Angular生命周期钩子，咱们先把你提到的几个钩子的特性掰明白，再给你对应场景的解决方案：

先逐个拆解你提到的钩子，看看它们是否符合你的需求：

• ngOnInit()：组件初始化完成后仅调用一次，非常适合处理第一次显示时的初始化逻辑（比如请求初始数据、设置默认状态），但它没法响应组件的"重新显示"（比如组件被*ngIf切换显示后再次出现的场景，除非组件被销毁重建）。
• ngAfterContentInit()：这个钩子是组件内容投影初始化完成后仅调用一次，你之前的理解有点小偏差——它不会在鼠标悬停这类变更检测事件中触发，只是内容投影初始化后的单次调用，所以也不适合覆盖重新显示的场景。
• ngAfterContentChecked()：这个钩子会在每次变更检测周期都运行，触发频率极高（鼠标移动、数据更新都会触发），用它绑定显示逻辑会带来不必要的性能损耗，完全不推荐。
• ngAfterViewInit()：同样是初始化完成后仅调用一次，主要用来操作组件的视图DOM（比如获取子组件实例、操作DOM元素），也没法处理重新显示的情况。

针对不同显示场景的解决方案 #

场景1：组件每次显示都是重新创建（比如用*ngIf控制显示隐藏） #

这种情况下，组件从隐藏到显示时会被先销毁再重新实例化，ngOnInit()会再次触发。直接把显示逻辑放在ngOnInit()里，就能同时覆盖初始显示和重新显示的需求，简单高效。

场景2：组件一直存在DOM中，仅通过[hidden]或CSS控制显示隐藏 #

这种情况组件不会被销毁，ngOnInit()只会触发一次，你可以这样处理：

• 监听控制显示的变量，用ngOnChanges()或者属性setter来触发显示逻辑：

  @Input() isVisible: boolean;
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['isVisible'] && changes['isVisible'].currentValue) {
      // 执行显示逻辑
      this.handleComponentShow();
    }
  }
  
  handleComponentShow() {
    // 这里放初始显示和重新显示都通用的逻辑
  }
  
  ngOnInit() {
    // 初始加载时如果组件是显示状态，直接执行逻辑
    if (this.isVisible) {
      this.handleComponentShow();
    }
  }
  

• 或者用ngDoCheck()但一定要加条件判断，避免频繁触发：

  private lastVisibleState = false;
  
  ngDoCheck() {
    if (this.isVisible !== this.lastVisibleState) {
      this.lastVisibleState = this.isVisible;
      if (this.isVisible) {
        this.handleComponentShow();
      }
    }
  }
  

场景3：路由切换导致的组件重新显示（比如从其他路由切回当前组件） #

如果是路由组件，默认路由策略下每次切换都会销毁重建，ngOnInit()会再次触发；如果开启了路由复用，那可以订阅路由事件来监听组件激活：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 每次路由切换到当前组件时执行显示逻辑
    this.handleComponentShow();
  });
}

内容的提问来源于stack exchange，提问作者Chris K.