Angular切换用户详情组件无法动态更新，求无刷新解决方案

出现这个问题的核心原因有两个：

1. UserDetailsComponent 仅在初始化时（ngOnInit）发起一次用户数据请求，后续URL参数变化时，虽然订阅了params更新了id，但没有重新触发用户数据的获取。
2. ChildDetailsComponent 的数据加载逻辑只在ngOnInit中执行一次，当父组件传入的passTCh（选中用户）更新时，组件不会重新获取用户列表并过滤数据。

1. 修改 UserDetailsComponent.ts #

将用户数据请求逻辑与params订阅绑定，确保每次URL参数变化时重新获取用户数据，推荐使用switchMap避免嵌套订阅：

import { switchMap } from 'rxjs/operators';
import { Params, ActivatedRoute } from '@angular/router';
import { UserService } from './user.service'; // 确保路径正确

export class UserDetailsComponent implements OnInit {
  public id!: any;
  public user!: any;

  constructor(private actRouted: ActivatedRoute, private userServise: UserService) { }

  ngOnInit(): void {
    this.actRouted.params.pipe(
      switchMap((params: Params) => {
        this.id = params['id'];
        return this.userServise.getUserById(this.id);
      })
    ).subscribe((data) => {
      this.user = data;
    },(error) => {
      console.warn("error");
    });
  }
}

同时修改模板（UserDetailsComponent.html），添加安全导航操作符避免空值报错：

<h3>{{user?.email}}</h3>
<h3>{{user?.name}}</h3>
<div class="center">
    <!-- 模板中无需加this，直接引用组件属性 -->
    <app-child-details [passTCh]="user"></app-child-details>
</div>

2. 修改 ChildDetailsComponent.ts #

使用ngOnChanges钩子监听输入属性passTCh的变化，每次变化时重新加载并过滤用户列表：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { UserService } from './user.service'; // 确保路径正确

export class ChildDetailsComponent implements OnInit, OnChanges {
  @Input() passTCh: any;
  data: any;
  filtered_array: any;

  constructor(private userServise: UserService) { }

  ngOnChanges(changes: SimpleChanges): void {
    // 检查passTCh是否发生变化且当前有值
    if (changes['passTCh'] && changes['passTCh'].currentValue) {
      this.loadRelatedUsers();
    }
  }

  ngOnInit(): void {
    // 初始化时加载一次数据
    if (this.passTCh) {
      this.loadRelatedUsers();
    }
  }

  // 抽离数据加载逻辑为单独方法
  private loadRelatedUsers(): void {
    this.userServise.getAllUsers().subscribe((data) => {
      this.data = data;
      // 过滤掉当前选中的用户
      this.filtered_array = this.data.filter((value: any) => value.id !== this.passTCh.id);
    }, (error) => {
      console.warn("Error", error);
    });
  }
}

修改模板（ChildDetailsComponent.html），优化语法并添加安全导航：

<h6>{{passTCh?.name}}</h6>
<hr />
<div *ngFor="let user of filtered_array">
    <h6><a [routerLink]="['/users', user.id]"> {{user.name}}</a></h6>
</div>

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