使用router.navigate时Angular应用出现冻结问题求助

问题代码 #

TypeScript 导航方法 #

navigateToHome () {
    this.router.navigate([''])
    .then(() => {
        window.location.reload();
    });
}

HTML 按钮绑定 #

<div class="toolbar">
  <div class="container container__screen">
    <div class="container__grow">
      <button type="button" class="btn btn-primary ml-sm button__home" (click)="navigateToHome()">
        <i class="far fa-home"></i>
      </button>
    </div>
    ...
</div>

环境信息 #

• Node.js 版本：v16.5.0
• Angular 核心依赖版本：

"@angular-devkit/core": "13.3.10",
"@angular/animations": "13.3.12",
"@angular/common": "13.3.12",
"@angular/compiler": "13.3.12",
"@angular/compiler-cli": "13.3.12",
"@angular/core": "^13.3.12",
"@angular/forms": "13.3.12",
"@angular/platform-browser": "13.3.12",
"@angular/platform-browser-dynamic": "13.3.12",
"@angular/router": "13.3.12"

已尝试操作 #

• 替换路由路径为this.router.navigate(['/control-guides']);，浏览器冻结问题仍存在

问题分析与解决方案 #

核心原因 #

this.router.navigate()是Angular单页应用的无刷新路由跳转，之后调用window.location.reload()会强制浏览器重新加载整个页面，导致Angular应用重复初始化，容易引发资源加载冲突、循环操作，最终导致浏览器冻结。

解决方案1：移除强制刷新，依赖Angular路由跳转 #

如果主页数据未更新的问题可以通过优化数据逻辑解决，直接移除刷新操作：

navigateToHome () {
    this.router.navigate(['']);
}

若需确保数据最新，可在主页组件的ngOnInit中优化数据获取逻辑，比如使用服务的可观察对象订阅，或通过路由参数触发数据刷新。

解决方案2：直接跳转并刷新页面（跳过Angular路由） #

如果确实需要强制刷新页面，直接使用原生跳转替代Angular路由，避免双重操作冲突：

navigateToHome () {
    window.location.href = '/'; // 替换为你的主页实际路径
}

额外排查点 #

检查主页组件的ngOnInit是否存在以下问题：

• 无限循环逻辑
• 大量同步阻塞操作
• 未及时销毁的订阅导致内存泄漏

示例：确保订阅在组件销毁时取消

import { Subscription } from 'rxjs';

private dataSub: Subscription;

ngOnInit() {
    this.dataSub = this.yourDataService.fetchData().subscribe(data => {
        // 处理数据逻辑
    });
}

ngOnDestroy() {
    this.dataSub?.unsubscribe();
}

内容的提问来源于stack exchange，提问作者david.luna.kapture