关于前端:Angular-LOCATIONINITIALIZED-Injection-token-的作用介绍

63次阅读

共计 2544 个字符，预计需要花费 7 分钟才能阅读完成。

import {LOCATION_INITIALIZED} from '@angular/common' 这行代码的作用是从 Angular 框架的 @angular/common 模块中导入名为 LOCATION_INITIALIZED 的符号（也能够称为常量、变量或标识符）。这个符号通常用于解决 Angular 应用程序的路由初始化过程，特地是在应用程序启动时。

为了更具体地解释这行代码的作用，咱们须要深刻理解 Angular 框架中的路由和初始化过程，以及 LOCATION_INITIALIZED 常量的具体用处。

Angular 是一个用于构建单页应用程序（SPA）的前端框架，它通过路由机制来治理不同页面之间的导航。在 Angular 中，路由是指定应用程序视图的形式，并定义了哪个组件应该在特定的 URL 被加载和显示。

在 Angular 中，路由初始化是指应用程序启动时，Angular 路由器开始监听 URL 变动，并依据以后 URL 加载相应的组件。这个过程通常在应用程序启动时执行，因而十分要害，因为它确保了应用程序在用户拜访不同的 URL 时可能正确地加载和显示相应的内容。

`LOCATION_INITIALIZED` 常量的作用

LOCATION_INITIALIZED 常量是 Angular 框架提供的一个标识符，用于示意路由初始化过程的实现。它是 @angular/common 模块的一部分，这个模块蕴含了许多 Angular 应用程序罕用的公共性能和工具。

具体来说，LOCATION_INITIALIZED 常量是一个标记，用于通知开发者何时能够平安地执行与路由初始化相干的操作。在应用程序启动时，路由器会在 URL 监听器之前触发 LOCATION_INITIALIZED 事件，这样开发者就能够在这个事件中执行一些初始化工作，确保应用程序正确地筹备好了路由导航。

为了更清晰地阐明 import {LOCATION_INITIALIZED} from '@angular/common' 的作用，让咱们通过一个简略的示例来展现如何在 Angular 应用程序中应用它。

假如咱们有一个 Angular 应用程序，其中蕴含多个路由，每个路由对应不同的页面。在某些状况下，咱们可能心愿在路由初始化实现后执行一些特定的操作，例如在路由导航开始之前加载一些数据，或者在特定路由被激活时执行某些逻辑。

以下是一个示例代码，演示了如何应用 LOCATION_INITIALIZED 常量来执行路由初始化后的操作：

import {Component, Injector} from '@angular/core';
import {Router} from '@angular/router';
import {LOCATION_INITIALIZED} from '@angular/common';
import {take} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  title = 'Angular Routing Example';

  constructor(private router: Router, private injector: Injector) {
    // 应用 LOCATION_INITIALIZED 常量来执行初始化操作
    this.router.events.pipe(take(1)).subscribe((event) => {if (event instanceof NavigationEnd) {
        // 在路由初始化后执行一些操作
        this.initializeAfterNavigation();}
    });
  }

  private initializeAfterNavigation() {
    // 在路由初始化后执行的操作
    console.log('路由已初始化，能够执行额定的操作。');
  }
}

// 在应用程序启动时执行初始化操作
export function appInitializerFactory(injector: Injector) {return () =>
    new Promise<void>((resolve) => {
      const locationInitialized = injector.get(
        LOCATION_INITIALIZED,
        Promise.resolve(null)
      );

      locationInitialized.then(() => {console.log('路由初始化实现！');
        resolve();});
    });
}

// 提供应用程序初始化函数
export const appInitializerProvider = {
  provide: APP_INITIALIZER,
  useFactory: appInitializerFactory,
  deps: [Injector],
  multi: true,
};

在上述示例中，咱们的 AppComponent 类中应用了 LOCATION_INITIALIZED 常量来监听路由初始化实现的事件。一旦路由初始化实现，咱们执行了 initializeAfterNavigation 办法，能够在这个办法中执行任何须要在路由初始化后进行的操作。

此外，咱们还提供了一个名为 appInitializerFactory 的函数，它是应用程序的初始化函数。这个函数应用 LOCATION_INITIALIZED 常量来确保在路由初始化实现后才持续应用程序的启动过程。这是通过将 appInitializerFactory 增加到 Angular 应用程序的依赖注入提供者中来实现的，确保在应用程序启动时执行。

总结一下，import {LOCATION_INITIALIZED} from '@angular/common' 容许开发者在 Angular 应用程序中监听和解决路由初始化过程，确保在路由导航开始之前执行特定的操作。这是一个十分重要的性能，能够用于各种场景，例如预加载数据、权限验证等。通过监听路由初始化事件，开发者能够更好地管制和定制他们的应用程序行为，以提供更好的用户体验。

正文完