使用Route Reuse Strategy时Angular CustomElements被销毁问题求助

你遇到的不是操作错误，这是Angular Route Reuse Strategy与CustomElement兼容的已知问题（对应GitHub Issue #27290），核心原因是Angular在复用路由组件时，没有正确触发CustomElement的生命周期钩子（比如connectedCallback），导致组件恢复后CustomElement无法正常渲染。

以下是几种可行的修复方案：

方案一：自定义Route Reuse Strategy，手动触发CustomElement钩子 #

修改你的路由复用策略，在组件被重新挂载时，主动调用CustomElement的生命周期方法：

1. 自定义Route Reuse Strategy类，扩展默认实现并添加触发逻辑：

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

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

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.data.reuse ?? false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    if (route.data.reuse) {
      this.storedRoutes.set(this.getRouteKey(route), handle);
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return this.storedRoutes.has(this.getRouteKey(route));
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.storedRoutes.get(this.getRouteKey(route)) ?? null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  private getRouteKey(route: ActivatedRouteSnapshot): string {
    return route.pathFromRoot.map(s => s.url.join('/')).join('/');
  }

  attach(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    // 获取复用的组件实例
    const componentInstance = handle?.componentRef?.instance;
    // 如果组件有自定义的刷新方法，调用它
    if (componentInstance && typeof componentInstance.refreshCustomElements === 'function') {
      componentInstance.refreshCustomElements();
    }
    // 若继承自DefaultRouteReuseStrategy，需调用super.attach(route, handle)执行默认挂载逻辑
  }
}

2. 在使用CustomElement的组件中，添加刷新方法：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-custom-view',
  template: '<my-custom-element #customEl></my-custom-element>'
})
export class CustomViewComponent {
  @ViewChildren('customEl') customElements!: QueryList<ElementRef>;

  refreshCustomElements() {
    this.customElements.forEach(el => {
      const customEl = el.nativeElement as HTMLElement;
      // 手动触发CustomElement的connectedCallback
      if (typeof customEl.connectedCallback === 'function') {
        customEl.connectedCallback();
      }
    });
  }
}

3. 在app.module.ts中注册自定义策略：

import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule {}

方案二：通过*ngIf强制重新渲染CustomElement #

利用Angular的变更检测机制，通过切换*ngIf状态强制重新创建CustomElement实例：

组件模板：

<my-custom-element *ngIf="isViewActive"></my-custom-element>

组件类：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-custom-view',
  templateUrl: './custom-view.component.html'
})
export class CustomViewComponent implements OnInit {
  isViewActive = true;
  private routeSub!: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 监听路由激活事件，触发重新渲染
    this.routeSub = this.route.url.subscribe(() => {
      this.isViewActive = false;
      // 用setTimeout确保变更检测完成后再显示
      setTimeout(() => this.isViewActive = true, 0);
    });
  }

  ngOnDestroy() {
    this.routeSub.unsubscribe();
  }
}

方案三：升级Angular版本 #

关注该GitHub Issue的进展，后续Angular版本可能会官方修复该兼容问题，定期升级到最新稳定版可尝试解决。

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