时间戳

首页 > 解决方案 > 在Angular中尽快调用服务中的函数？

angular - 在Angular中尽快调用服务中的函数？

问题描述

我的页面应该尽快从后端 (Contentful.com) 加载内容。我在一个额外的服务中加载后端内容，该服务在我的根模块中注册。如何确保getContent()尽快调用此服务中的函数？：

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

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

  constructor() { }

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

我的想法是创建一个 Home 组件，该组件在构造函数中具有服务，然后在ngOnInit()该组件调用getContentService.getContent()中。但这是最快的方法吗？（我知道这只是几毫秒的问题，但我想学习正确/最好的方法......）

标签： angular

解决方案

如果您想在应用程序启动之前调用后端作为引导的一部分，您可以使用APP_INITIALIZER。

用法：

function initializeApp(): Promise<any> {
  return new Promise((resolve, reject) => {
    // Do some asynchronous stuff
    resolve();
  });
}

@NgModule({
 imports: [BrowserModule],
 declarations: [AppComponent],
 bootstrap: [AppComponent],
 providers: [{
   provide: APP_INITIALIZER,
   useFactory: () => initializeApp,
   multi: true
  }]
 })
export class AppModule {}

但是您必须注意，这会延迟应用程序的启动时间，并且大多数时间不是您想要的，因为您无法为调用您的应用程序的用户提供有意义的视觉反馈。

推荐阅读