Angular 2+如何在应用启动前动态获取路由列表？

我来帮你梳理下在Angular里实现「启动前获取数据再初始化应用」的具体方案，刚好对应你提到的AngularJS里的类似机制：

一、核心思路：选择合适的时机发起请求 #

你猜的没错，main.ts确实是实现这个需求的关键入口——因为它是Angular应用的启动起点，在调用platformBrowserDynamic().bootstrapModule(AppModule)之前的代码，都是在应用初始化前执行的，完全可以在这里发起请求，拿到数据后再启动应用。

二、无类情况下创建HttpClient实例的方法 #

因为此时Angular的依赖注入系统还没启动，没法直接通过构造函数注入HttpClient，所以我们可以手动实例化它：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { HttpClient, HttpXhrBackend } from '@angular/common/http';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 手动创建HttpClient实例，基于原生XMLHttpRequest
const httpClient = new HttpClient(new HttpXhrBackend({ 
  build: () => new XMLHttpRequest() 
}));

// 发起请求，成功后启动应用
httpClient.get('/api/your-initial-data').subscribe({
  next: (response) => {
    // 先把数据存起来，后面说怎么共享
    environment.initialRouteData = response;
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error('应用启动失败:', err));
  },
  error: (err) => {
    console.error('预加载数据失败:', err);
    // 这里可以根据业务决定：是失败后仍启动应用，还是终止
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error('应用启动失败:', err));
  }
});

三、如何和其他组件共享预加载的数据 #

这里给你两种常用的方案：

• 方案1：存入环境变量
  像上面代码里那样，把数据赋值给environment对象的自定义属性，之后在任意组件里导入environment就能直接访问：

  import { environment } from '../environments/environment';
  
  @Component(...)
  export class YourComponent {
    ngOnInit() {
      const initialData = environment.initialRouteData;
      // 使用数据做初始化逻辑
    }
  }
  

• 方案2：用全局服务存储（更推荐）
  创建一个全局服务，用静态属性或者实例属性存储数据，这样更符合Angular的设计理念：

  // initial-data.service.ts
  import { Injectable } from '@angular/core';
  
  @Injectable({ providedIn: 'root' })
  export class InitialDataService {
    public initialData: any;
  }
  

  然后在main.ts里：

  // 先导入服务
  import { InitialDataService } from './app/initial-data.service';
  
  // 请求成功后赋值
  httpClient.get('/api/your-initial-data').subscribe({
    next: (response) => {
      InitialDataService.prototype.initialData = response;
      platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.error('应用启动失败:', err));
    }
  });
  

  组件里注入服务就能拿到数据：

  import { InitialDataService } from './initial-data.service';
  
  @Component(...)
  export class YourComponent {
    constructor(private initDataService: InitialDataService) {}
  
    ngOnInit() {
      const data = this.initDataService.initialData;
    }
  }
  

四、Angular官方推荐的启动前初始化方案：APP_INITIALIZER #

其实Angular内置了专门处理「启动前初始化」的机制——APP_INITIALIZER令牌，它会在应用启动前执行你定义的初始化函数，并且会等待函数返回的Promise完成后，再继续初始化应用，完全匹配你的需求，比手动在main.ts里写请求更优雅：

步骤1：创建初始化服务 #

// app-initializer.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class AppInitializerService {
  private _initialData: any;

  constructor(private http: HttpClient) {}

  // 定义加载数据的方法，返回Promise
  loadInitialData(): Promise<any> {
    return this.http.get('/api/your-initial-data').toPromise()
      .then(data => {
        this._initialData = data;
        return data;
      })
      .catch(err => {
        console.error('预加载数据失败:', err);
        // 可以选择返回空数据，或者抛出错误终止启动
        return Promise.resolve(null);
      });
  }

  // 提供获取数据的 getter
  get initialData(): any {
    return this._initialData;
  }
}

步骤2：在AppModule中配置APP_INITIALIZER #

// app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppInitializerService } from './app-initializer.service';
import { AppComponent } from './app.component';

// 定义初始化工厂函数
export function initializeApp(initService: AppInitializerService) {
  return () => initService.loadInitialData();
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppInitializerService],
      multi: true // 允许多个初始化函数
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

步骤3：在组件中使用数据 #

之后在任意组件里，只要注入AppInitializerService就能拿到预加载的数据：

import { AppInitializerService } from './app-initializer.service';

@Component(...)
export class YourComponent {
  constructor(private initService: AppInitializerService) {}

  ngOnInit() {
    const initialData = this.initService.initialData;
    // 基于数据做组件初始化
  }
}

总结 #

• Angular没有专门的「启动前事件」，但APP_INITIALIZER是官方推荐的启动前初始化机制，完全满足你的需求；
• 如果一定要在main.ts里手动发起请求，也可以实现，但要注意手动创建HttpClient的方式，以及数据的共享方案；
• 推荐使用APP_INITIALIZER，因为它更贴合Angular的依赖注入体系，代码更易维护。

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