Angular 5：使用RouteReuseStrategy时如何重新加载当前数据

这个问题我之前在项目里也碰到过——RouteReuseStrategy确实能帮你保留搜索组件的输入状态、滚动位置这些，但它也把组件实例"冻住"了，外部数据更新后，缓存的组件根本不知道要去拉新数据。下面给你几个实用的解决方案，按需选择：

方案1：在RouteReuseStrategy钩子中触发组件刷新 #

自定义你的RouteReuseStrategy，在组件被重新附加到DOM时，主动调用组件的刷新方法。这样既能保留缓存的UI状态（比如搜索框输入内容），又能更新数据。

首先，在自定义的RouteReuseStrategy里，修改retrieve方法：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private handles: Map<string, DetachedRouteHandle> = new Map();

  // 省略其他必要方法（shouldReuseRoute、shouldDetach、store等）...

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const routeKey = this.getRouteKey(route); // 自定义的路由唯一标识生成逻辑
    const handle = this.handles.get(routeKey);
    
    if (handle) {
      // 获取缓存的组件实例
      const componentInstance = handle.componentRef.instance;
      // 如果组件实现了refreshData方法，调用它刷新数据
      if (typeof componentInstance.refreshData === 'function') {
        componentInstance.refreshData();
      }
    }
    return handle;
  }

  private getRouteKey(route: ActivatedRouteSnapshot): string {
    // 这里可以用路由路径+参数生成唯一key，比如：
    return route.routeConfig?.path || '' + JSON.stringify(route.params);
  }
}

然后在你的搜索组件里，实现refreshData方法，专门用于拉取最新数据：

import { Component } from '@angular/core';
import { SearchService } from './search.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html'
})
export class SearchComponent {
  searchResults: any[] = [];
  searchInput: string = ''; // 这个状态会被RouteReuseStrategy保留

  constructor(private searchService: SearchService) {}

  // 组件初始化时加载数据
  ngOnInit() {
    this.loadSearchResults();
  }

  // 封装数据加载逻辑，供初始化和刷新调用
  private loadSearchResults() {
    this.searchService.getSearchResults(this.searchInput).subscribe(data => {
      this.searchResults = data;
    });
  }

  // 供RouteReuseStrategy调用的刷新方法
  refreshData() {
    this.loadSearchResults();
  }
}

方案2：用共享服务发布数据更新事件 #

如果你不想修改RouteReuseStrategy的逻辑，可以用一个全局的共享服务，在数据被修改时发布事件，让搜索组件订阅这个事件，自动刷新数据。这种方式更灵活，适合多个组件间的数据同步场景。

首先创建一个数据变更通知服务：

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataChangeNotificationService {
  private dataUpdated$ = new Subject<void>();

  // 发布数据更新事件
  notifyDataUpdated() {
    this.dataUpdated$.next();
  }

  // 订阅数据更新事件
  onDataUpdated(): Observable<void> {
    return this.dataUpdated$.asObservable();
  }
}

然后在编辑组件中，当数据保存成功后，发布事件：

import { Component } from '@angular/core';
import { DataService } from './data.service';
import { DataChangeNotificationService } from './data-change-notification.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html'
})
export class EditComponent {
  editedData: any = {};

  constructor(
    private dataService: DataService,
    private dataChangeNotify: DataChangeNotificationService,
    private router: Router
  ) {}

  saveChanges() {
    this.dataService.updateData(this.editedData).subscribe(() => {
      // 通知所有订阅者数据已更新
      this.dataChangeNotify.notifyDataUpdated();
      // 跳回搜索组件
      this.router.navigate(['/search']);
    });
  }
}

最后在搜索组件里订阅这个事件，自动刷新数据：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SearchService } from './search.service';
import { DataChangeNotificationService } from './data-change-notification.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html'
})
export class SearchComponent implements OnInit, OnDestroy {
  searchResults: any[] = [];
  searchInput: string = '';
  private dataUpdateSub: Subscription | null = null;

  constructor(
    private searchService: SearchService,
    private dataChangeNotify: DataChangeNotificationService
  ) {}

  ngOnInit() {
    this.loadSearchResults();
    // 订阅数据更新事件
    this.dataUpdateSub = this.dataChangeNotify.onDataUpdated().subscribe(() => {
      this.loadSearchResults();
    });
  }

  private loadSearchResults() {
    this.searchService.getSearchResults(this.searchInput).subscribe(data => {
      this.searchResults = data;
    });
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy() {
    this.dataUpdateSub?.unsubscribe();
  }
}

方案3：按需禁用路由复用（适合不需要保留全部状态的场景） #

如果你在某些场景下不需要保留搜索组件的状态（比如从编辑页返回时），可以在RouteReuseStrategy的shouldReuseRoute方法里判断，强制重新创建组件：

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
  // 判断是否从编辑页返回搜索页
  const isReturningFromEdit = future.routeConfig?.path === 'search' && curr.routeConfig?.path === 'edit';
  // 如果是，不重用路由，重新创建组件
  if (isReturningFromEdit) {
    return false;
  }
  // 其他情况正常复用路由
  return future.routeConfig === curr.routeConfig;
}

⚠️ 注意：这个方法会丢失搜索组件的UI状态（比如输入框内容），如果需要保留状态，得额外把状态存在服务里，组件初始化时再恢复。

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