Angular如何在应用初始化时运行代码详解

Angular提供了多种方法在应用初始化时运行代码，以下是其中的几种方法：

1. AppModule的providers数组中添加APP_INITIALIZER

在AppModule中的providers数组中添加APP_INITIALIZER，可以运行一段代码来初始化应用程序。APP_INITIALIZER是一个工厂函数，它返回一个Promise。当Angular应用初始化时，这个Promise会被解决并且返回结果将被忽略，但如果Promise被拒绝，应用程序将不会启动。

以下是一个示例代码：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AppConfig } from './app-config';

export function initApp(appConfig: AppConfig) {
  return () => appConfig.load();
}

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  providers: [
    AppConfig,
    { provide: APP_INITIALIZER, useFactory: initApp, deps: [AppConfig], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的代码中，我们先定义了一个名为AppConfig的服务，它返回一个Promise来加载应用程序的配置。这个服务通过APP_INITIALIZER添加到了AppModule的providers数组中。initApp是一个工厂函数，它创建一个函数来调用AppConfig的load()函数。

2. 使用ngDoBootstrap方法

除了在AppModule中添加APP_INITIALIZER外，还可以在根组件中使用ngDoBootstrap方法。这个方法会在应用程序初始化时调用。我们可以使用这个机会来初始化任何应用程序级别的代码。

以下是一个示例代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [],
})
export class AppModule {
  ngDoBootstrap(appRef: ApplicationRef) {
    console.log('Initializing application...');
    // 初始化代码
  }
}

在上面的代码中，我们在AppModule中定义了一个名为ngDoBootstrap的方法。这个方法会在应用程序初始化时调用，并且为我们提供了一个ApplicationRef的实例，可以用来访问整个应用程序。在这里，我们输出了一条日志来表示应用程序正在初始化，并且可以在后面添加任何需要的初始化代码。

以上是两种常用的在Angular应用程序初始化时运行代码的方法。通过使用这些方法，我们可以轻松地初始化应用程序，并且在开始运行之前对其进行配置和设置。