如何解决 Angular 中 `window.location.href` 导致的 spinner 延迟加载问题？

windows

2024-03-20 05:30:05

解决 Angular 中 window.location.href 导致 spinner 延迟加载的难题

引言

在 Angular 应用中使用 window.location.href 直接导航到其他页面时，有时会出现 spinner 无法及时加载的问题，导致页面出现短暂的空白。本文将深入探讨这个问题并提供一个有效的解决方案。

问题分析

window.location.href 直接触发浏览器导航，绕过 Angular 组件生命周期。组件的销毁过程未能正常完成，导致 spinner 在组件销毁后才被停止，无法在页面加载时及时显示。

解决方案

为了解决这个问题，需要在导航之前手动触发组件销毁。具体步骤如下：

创建销毁布尔变量

在组件中创建私有布尔变量 _destroyed，初始值为 false。

在 `ngOnDestroy` 中设置销毁标志

在组件的 ngOnDestroy 生命周期钩子中，将 _destroyed 设置为 true。

在导航之前检查销毁标志

在调用 window.location.href 之前，检查 _destroyed 是否为 true。如果是，则组件已销毁，可以安全地导航。

手动触发组件销毁

使用 setTimeout 函数在导航之前手动触发组件销毁。在 setTimeout 回调函数中，设置 _destroyed 为 true，然后调用 window.location.href。

代码示例

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<button (click)="navigate()">Navigate</button>`
})
export class MyComponent {
  private _destroyed = false;

  navigate(): void {
    if (this._destroyed) {
      window.location.href = "sample URL";
    } else {
      setTimeout(() => {
        this._destroyed = true;
        window.location.href = "sample URL";
      }, 0);
    }
  }
}