Angular 17组件在canDeactivate Guard前销毁的问题求助

针对你在Angular 17.0.7中遇到的懒加载模块/独立组件切换时，canDeactivate Guard调用前组件已销毁、传入实例为null的问题，以下是可行的解决办法：

1. 给目标路由添加runGuardsAndResolvers: 'always'配置 #

这个配置会强制路由切换时优先执行守卫逻辑，避免组件提前被销毁。在路由定义中给需要保护的懒加载路由或独立组件路由加上该配置：

const routes: Routes = [
  {
    path: 'lazy-page',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
    canDeactivate: [yourCanDeactivateGuard],
    runGuardsAndResolvers: 'always'
  },
  {
    path: 'standalone-page',
    loadComponent: () => import('./standalone/standalone.component').then(c => c.StandaloneComponent),
    canDeactivate: [yourCanDeactivateGuard],
    runGuardsAndResolvers: 'always'
  }
];

2. 独立组件绑定守卫+提前监听状态 #

对于独立组件，直接在组件内部注入守卫，并通过HostListener监听页面卸载事件，同时实现自定义的canDeactivate方法，确保守卫能拿到有效实例：

// 独立组件代码
@Component({
  selector: 'app-standalone',
  templateUrl: './standalone.component.html',
  standalone: true,
  imports: [CommonModule],
  providers: [YourCanDeactivateGuard]
})
export class StandaloneComponent implements CanDeactivateComponent {
  hasUnsavedChanges = false;

  @HostListener('window:beforeunload', ['$event'])
  handleBeforeUnload(event: Event) {
    if (this.hasUnsavedChanges) {
      event.preventDefault();
      event.returnValue = '';
    }
  }

  canDeactivate(): boolean | Observable<boolean> {
    return this.hasUnsavedChanges ? confirm('有未保存内容，确定离开吗？') : true;
  }
}

// 守卫代码
export const yourCanDeactivateGuard: CanDeactivateFn<CanDeactivateComponent> = (component) => {
  return component?.canDeactivate() ?? true;
};

3. 用路由快照/状态传递替代组件实例依赖 #

如果组件实例确实无法保留，可以在组件中将未保存状态存入路由的data或导航状态中，守卫直接从路由快照读取状态，不需要依赖组件实例：

// 组件内更新状态
constructor(private router: Router) {}

onContentChange() {
  this.hasUnsavedChanges = true;
  // 将状态存入当前路由data
  const currentRoute = this.router.config.find(r => r.path === 'standalone-page');
  if (currentRoute) currentRoute.data = { ...currentRoute.data, hasUnsavedChanges: true };
}

// 守卫代码
export const yourCanDeactivateGuard: CanDeactivateFn<any> = (_, currentRoute) => {
  const hasUnsaved = currentRoute.data?.hasUnsavedChanges;
  return hasUnsaved ? confirm('有未保存内容，确定离开吗？') : true;
};

4. 官方已知问题的临时适配 #

你提到的问题是Angular 17.x的已知问题，除了上述方法，还可以在路由配置中启用withInMemoryScrolling，部分场景下能延迟组件销毁时机，配合守卫执行：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withInMemoryScrolling({ scrollPositionRestoration: 'top' })),
    // 其他服务提供者
  ]
};

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