Question

我想知道在其他任何组件或服务尝试访问它们之前，是否可以依靠下面正在执行的代码以及本地存储中可用的应用程序设置。

此外，除了引导应用程序外，再也看不到任何使用该应用程序组件的教程或示例。使用它是不好的做法吗？

import { Component } from "@angular/core";
import { AngularFirestore } from "angularfire2/firestore";
import { AngularFireAuth } from "@angular/fire/auth";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  db: any;
  constructor(public afs: AngularFirestore, public afAuth: AngularFireAuth) {
    this.getSettings();
  }
  async getSettings() {
    var docRef = this.db.collection("mas-settings").doc("default");

    await docRef.get().then(doc => {
           localStorage.setItem("appAdmin", JSON.stringify(doc.data().appAdministrator));
  localStorage.setItem("authorizeDomain", JSON.stringify(doc.data().authorizedDomain));
  localStorage.setItem("contactAdmin", JSON.stringify(doc.data().contactAdministrator));
  localStorage.setItem("contactGroup", JSON.stringify(doc.data().appContactGroup));
    });
  }
}

Answer 1

解决问题的正确方法是为工厂提供APP_INITIALIZER令牌。

示例：

@NgModule({
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: appInitializerFactory,
            deps: [/* Your dependencies */],
            multi: true,
        },
    ],
})
export class AppModule {}

export function appInitializerFactory(/* The injection of your dependencies, in the same order as above */) {
    return () =>
        new Promise<any>((resolve: any) => {
            // Do your async work, call `resolve()` when done.
        });
}

有关更多信息，您可以检查here或here。

Answer 2

要在使用任何组件之前进行设置，无论您应用的入口点如何，您都可以考虑使用APP_INITIALIZER。

APP_INITIALIZER：在初始化应用之前，将调用回调。所有注册的初始值设定项可以有选择地返回Promise。所有返回Promises的初始化函数必须在应用程序被引导。如果初始化程序之一失败解决，该应用程序未引导。

ref：https://angular.io/guide/dependency-injection-providers#predefined-tokens-and-multiple-providers

应用程序组件是否在所有其他组件之前初始化？

2 个答案: