Angular 如何实现从一个组件触发刷新另一个组件？

原参考方案的核心疏漏 #

网上流传的这套Angular路由刷新方案没有讲清两个关键规则，直接照搬大概率出问题：

• 路由复用策略是全局配置，不是组件级配置，不能随便在业务组件里重复设置
• 路由事件的全局订阅不能跟着业务组件销毁就取消，否则会直接导致刷新逻辑失效

代码的正确放置位置 #

不要把路由配置、事件监听的代码丢到普通业务组件（不管是触发刷新的按钮组件，还是要被刷新的目标组件）里。推荐把所有逻辑封装成根注入的共享服务，全局只初始化一次，从根源上避免重复配置、订阅泄漏的问题。
服务的完整实现如下：

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RouteRefreshService {
  private eventSubscription: Subscription | null = null;

  constructor(private router: Router) {
    // 全局仅设置一次路由复用规则：所有路由跳转都不复用旧的组件实例
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    // 监听路由跳转完成事件
    this.eventSubscription = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 标记路由为未导航状态，保证下次切到相同路由时会触发组件完整重建
        this.router.navigated = false;
      }
    })
  }

  // 对外提供当前路由刷新方法
  refreshActiveRoute() {
    const fullCurrentUrl = this.router.url;
    // 先临时跳转到空路由（不改变地址栏内容），再跳回原地址，触发组件重建
    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
      this.router.navigateByUrl(fullCurrentUrl);
    })
  }
}

按钮触发刷新的实现方式 #

• 如果要刷新的目标组件是通过路由出口（<router-outlet>）加载的，直接在放按钮的组件里注入上述RouteRefreshService，在按钮的点击事件里调用refreshActiveRoute()即可。
  调用示例：

  // 按钮所在组件的逻辑
  @Component({
    selector: 'app-side-bar',
    template: `<button (click)="onRefreshClick()">刷新内容</button>`
  })
  export class SideBarComponent {
    constructor(private routeRefreshService: RouteRefreshService) {}
  
    onRefreshClick() {
      this.routeRefreshService.refreshActiveRoute();
    }
  }
  

  这个操作会销毁当前路由下挂载的所有组件实例（包括待刷新的目标组件），再重新创建挂载，效果等同于完整刷新页面。
• 如果两个需要联动的组件没有路由关系（比如同级直接挂在页面上的两个组件，不经过路由出口加载），这套路由方案完全不适用。更轻量的实现是用共享服务做事件通知：在根注入的服务里新增private refreshTrigger$ = new Subject<void>()，按钮点击时调用this.refreshTrigger$.next()，目标组件订阅这个Subject，收到值后重新执行数据拉取、状态重置逻辑即可。

常见踩坑提醒 #

• 不要在业务组件的ngOnDestroy钩子里面取消上述服务里的全局路由事件订阅：这个订阅是全局生效的，一旦取消，后续的路由重建逻辑就会失效，只有在应用整体退出时才需要清理这个订阅。
• 路由刷新方案会销毁所有当前路由下的组件，如果你只想刷新单个目标组件，不要用这套方案，直接用Subject事件通知更精准，不会造成无关组件的无意义重建。

内容的提问来源于stack exchange，提问作者Yoël Zerbib