您可以使用Angular app.component将应用程序设置写入本地存储吗？

Question

我可以使用应用程序组件将设置写入本地存储，然后从其他组件访问设置吗？

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