Angular搜索后页面数据不更新问题排查与解决

1. 组件实例错误：你在RechercheToutComponent中直接注入RechercheComponent，Angular会创建一个全新的RechercheComponent实例（而非页面上正在渲染的那个）。调用该实例的searchResult方法时，页面上的组件根本接收不到新数据，自然不会更新。
2. 路由参数未触发搜索：RechercheComponent仅在初始化时调用一次searchResult，后续路由参数变化（比如在搜索页内再次搜索）时，虽然订阅了queryParams，但未重新触发搜索逻辑。
3. Observable赋值逻辑缺陷：每次搜索都给results$赋值新的of(data)，但结合前面的实例错误，这种赋值根本作用不到正确的组件实例上。

步骤1：修复搜索栏组件，移除组件直接注入 #

删除对RechercheComponent的注入，仅通过路由参数传递搜索关键词：

// RechercheToutComponent.ts
export class RechercheToutComponent implements OnInit {
  searchInput = new FormControl('');

  constructor(private router: Router) { }

  ngOnInit(): void { }

  search() {
    const searchValue = this.searchInput.value.trim();
    if (!searchValue) return;
    
    // 统一导航到搜索页并传递参数
    this.router.navigate(['/recherche'], { queryParams: { search: searchValue } });
  }
}

步骤2：重构搜索结果组件，监听路由参数变化 #

使用BehaviorSubject管理搜索结果，通过switchMap监听路由参数变化，自动触发搜索：

// RechercheComponent.ts
import { BehaviorSubject } from 'rxjs';
import { switchMap } from 'rxjs/operators';

export class RechercheComponent implements OnInit {
  private resultsSubject = new BehaviorSubject<Array<any>>([]);
  results$ = this.resultsSubject.asObservable();
  isResultLoading: boolean = true;

  constructor(
    private route: ActivatedRoute,
    private http: HttpClient
  ) { }

  ngOnInit(): void {
    // 监听路由参数变化，自动触发搜索
    this.route.queryParams.pipe(
      switchMap(params => {
        const searchParam = params['search'];
        if (!searchParam) {
          this.isResultLoading = false;
          return [];
        }
        this.isResultLoading = true;
        // 发起HTTP请求
        return this.http.get<Array<any>>(`${environment.apiUrl}/Recherchetout.php`, { params: { search: searchParam } });
      })
    ).subscribe(data => {
      this.resultsSubject.next(data);
      this.isResultLoading = false;
    });
  }
}

步骤3：调整模板（仅需小修改） #

保持原有结构，优化空值判断的写法：

<!-- RechercheComponent.html -->
<div class="recherche">
  <div class="spinner-search" *ngIf="isResultLoading">
    <app-spinner></app-spinner>
  </div>
  <div class="content" *ngIf="!isResultLoading">
    <div *ngFor="let item of results$ | async">
      <div *ngIf="item.produit">
        {{ item.produit.pdf }}
      </div>
    </div>
  </div>  
</div>

• 组件不能直接注入：Angular组件实例由框架在渲染时创建，直接注入会得到未挂载到DOM的新实例，修改不会反映到页面。组件间通信应使用服务、路由参数或@Input/@Output。
• BehaviorSubject的作用：保存当前结果状态，新订阅者（如async管道）能立即获取最新数据，调用next()时会通知所有订阅者更新。
• switchMap操作符：路由参数变化时自动取消未完成的旧请求，避免旧结果覆盖新数据。

内容的提问来源于stack exchange，提问作者Théo Polo