如何在Angular中实现类似React useEffect的钩子功能？

需求背景 #

之前用React的useEffect钩子实现了仅当post?.userId变化时才异步获取对应用户数据的逻辑，现在要在Angular中复刻相同功能。当前Angular代码是在ngOnInit中一次性获取所有帖子，需要调整为仅在userId变化时重新执行用户数据获取逻辑。

React参考实现 #

useEffect(() => {
  const fetchUser = async () => {
    const res = await axios.get(`/users?id=${post?.userId}`);
    setUser(res.data);
  };
  fetchUser();
}, [post?.userId]);

当前Angular代码（待改造） #

ngOnInit(): void {
    const res = this.postService.getAllPosts();
    this.postService.setPosts(res);
}

解决方案：两种常用实现方式 #

方式一：使用ngOnChanges生命周期钩子（适合userId为@Input传入的场景）

如果userId是父组件通过@Input传递的属性，直接用ngOnChanges监听属性变化：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { PostService } from './post.service';

@Component({
  selector: 'app-post-user',
  templateUrl: './post-user.component.html'
})
export class PostUserComponent implements OnChanges {
  // 接收父组件传入的userId
  @Input() userId?: number;
  user: any;

  constructor(private postService: PostService) {}

  // 监听属性变化
  ngOnChanges(changes: SimpleChanges): void {
    // 检查userId是否发生变化，且排除初始未定义的情况
    const userIdChange = changes['userId'];
    if (userIdChange && userIdChange.currentValue !== userIdChange.previousValue) {
      this.fetchUser();
    }
  }

  // 异步获取用户数据
  private async fetchUser(): Promise<void> {
    if (!this.userId) return;
    // 假设PostService提供了根据ID获取用户的方法
    const res = await this.postService.getUserById(this.userId);
    this.user = res.data;
  }

  // 保留原有的初始化获取帖子逻辑
  ngOnInit(): void {
    const res = this.postService.getAllPosts();
    this.postService.setPosts(res);
    // 如果初始化时已有userId，直接触发一次请求
    if (this.userId) {
      this.fetchUser();
    }
  }
}

方式二：用RxJS响应式监听（适合组件内部管理userId状态的场景）

如果userId是组件内部维护的状态，用BehaviorSubject存储并通过switchMap自动触发请求，更符合Angular的响应式风格：

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, switchMap } from 'rxjs';
import { PostService } from './post.service';

@Component({
  selector: 'app-post-user',
  templateUrl: './post-user.component.html'
})
export class PostUserComponent implements OnInit {
  // 用BehaviorSubject存储userId状态，初始值为undefined
  private userIdSubject = new BehaviorSubject<number | undefined>(undefined);
  // 自动订阅userId变化，返回用户数据的Observable
  user$ = this.userIdSubject.pipe(
    switchMap(userId => {
      if (!userId) return []; // 无userId时返回空值
      return this.postService.getUserById(userId);
    })
  );

  constructor(private postService: PostService) {}

  ngOnInit(): void {
    // 保留原有的初始化获取帖子逻辑
    const res = this.postService.getAllPosts();
    this.postService.setPosts(res);
  }

  // 当post的userId变化时，调用此方法更新状态
  updatePostUserId(postUserId?: number): void {
    this.userIdSubject.next(postUserId);
  }
}

注意：如果getAllPosts是异步方法（返回Observable），需要改成订阅方式：

this.postService.getAllPosts().subscribe(res => {
  this.postService.setPosts(res);
});

内容的提问来源于stack exchange，提问作者Deep