Angular中如何最快调用根注入服务的getContent方法加载Contentful后端内容？

你原本在组件ngOnInit中调用的方案确实不是最快的，Angular有官方提供的更早的执行时机，以下是具体实现：

1. 最优方案：使用Angular内置APP_INITIALIZER令牌 #

这是Angular官方提供的应用初始化钩子，会在应用根组件渲染前、所有组件实例化前执行指定逻辑，是目前能实现的最早调用时机，也是行业通用最佳实践。
你可以选择是否阻塞应用启动：如果需要首屏必须等内容加载完成再渲染，就返回Promise；如果不想阻塞启动，直接调用方法即可。

AppModule配置代码示例： #

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GetContentService } from './get-content.service';
import { AppComponent } from './app.component';

// 初始化逻辑工厂函数
export function initContentFactory(contentService: GetContentService) {
  return () => {
    // 不需要阻塞启动直接调用即可
    contentService.getContent();
    // 需要阻塞启动等内容加载完成的话，返回Promise即可，注意修改getContent返回Promise类型
    // return contentService.getContent();
  };
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initContentFactory,
      deps: [GetContentService],
      multi: true // 支持注册多个初始化逻辑
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 次选方案：根服务构造函数内直接调用 #

你的服务是providedIn: 'root'的全局单例服务，第一次被注入时就会实例化，直接在构造函数中调用getContent()，执行时机远早于组件生命周期。

服务代码示例（已修正你原代码的语法错误）： #

import { Injectable } from '@angular/core';
import {environment} from 'src/environments/environment.local';

@Injectable({
  providedIn: 'root'
})
export class GetContentService {

  constructor() { 
    // 实例化时直接执行加载逻辑
    this.getContent();
  }

  getContent() {
   loadingMyContentIntoAnObservable.then(content => 
      console.log("received the content", content)
  );
}
}

注意：如果服务没有被任何地方注入，Angular不会实例化它，逻辑就不会执行。如果用这个方案建议在AppModule的构造函数中注入一次服务触发实例化：

export class AppModule {
  constructor(private contentService: GetContentService) {}
}

原有方案的不足 #

组件ngOnInit需要等Angular完成路由匹配、组件实例化、输入属性绑定之后才会执行，比上面两个方案晚几十到几百毫秒不等，仅适合和当前组件渲染强相关的逻辑，不适合全局提前加载的内容请求。

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