Ionic 3 - 在第一个应用程序加载时从服务器端数据设置全局变量

Question

我正在研究离子3应用程序，它需要在导航到第一页（Tab1）之前从服务器加载应用程序设置。基本上，我需要在向用户显示启动画面的同时加载设置。

获取设置后，我需要将其分配给全局变量/对象，以便我可以在应用程序中使用它，而无需在每次更改选项卡时重新加载设置。

注意：如果用户杀死应用并重新启动，我想在转到FirstPage（Tab1）之前再次加载设置。

哪个是处理此操作的最佳位置和事件？有什么建议吗？

Answer 1

您可以在app.component.ts中执行此操作，可以在initialize（）函数中，在构造函数中调用。功能可能如下：

protected initializeApp() {   
    this.platform.ready().then(() => {
      //Your code
     });
}

Answer 2

所有这些都是一个理论示例，因此您必须创建自己的代码

  

您可以使用Angular核心中的 APP_INITIALIZER   Example

<强> app.module.ts

import { APP_INITIALIZER } from "@angular/core";
import { GlobalProvider} from "../providers/global/global";

export function init_app(global: GlobalProvider){
    // Init required providers before load the app
    // NOTE: this factory needs to return a function (that then returns a promise)
    return () => global.load()  // + any other providers...
}

@NgModule({
  ...
  providers: [
    GlobalProvider,
    {
      provide: APP_INITIALIZER,
      useFactory: init_app,
      deps: [GlobalProvider],
      multi: true
    },
    ....
  ]
})

  

创建提供商：离子g提供商全球   Example

在新的Provider

中声明您的变量

 import { Injectable } from '@angular/core';
    /*
      Generated class for the GlobalProvider provider.
    */
    @Injectable()
    export class GlobalProvider {

      public myGlobalVar: string;

      public async load() { ... }

    }

在下面的其他.ts文件中使用

import { GlobalProvider } from "../../providers/global/global";

constructor( public global: GlobalProvider) { }

在模板文件中使用，如下所示

<ion-content>
  <h1>{{ global.myGlobalVar }} </h1>
</ion-content>