将数据从 head 传递到 body in html 到 bootstrap 一个 angular app

Question

我正在开发一款应用程序，其中一部分基于 mvc razor 和 vanilla javascript，另一部分是 angular 应用程序。我需要将从页面头部的脚本生成的一些 json 数据传递到 body 部分，这是一个 angular 应用程序。格式是这样的：

代码：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="/js/build/bundles/sharedStyles.css" />
        <link rel="stylesheet" type="text/css" href="/js/build/bundles/staticStyles.css" />
        <script>
            *** (In this script I am calling an api asyncly to get some config and bootstrap the angular app with this config)
        </script>
    </head>
    <body>
        <test-app></test-app>
        <script src="/js/build/bundles/allScripts.js" type="text/javascript </script>
</body>
</html>

在上面的代码片段中，我需要将 api 异步调用的结果传递给 angular 应用程序，这样做的最佳方法是什么？我知道 angular 有这样一个应用初始化程序的概念：

provide: APP_INITIALIZER, useFactory: DataFactory, multi: true, deps: [dataService] }

但我仍然很迷茫如何将某些东西从 head 传递到 body 并使 angular 应用程序在开始引导之前等待以某种承诺完全获取该值。任何帮助或代码示例将不胜感激

Answer 1

也许快速通读 Angular 体系结构概述文档 https://angular.io/guide/architecture 是个好主意，它为您提供了有关其全部功能的全面解释。

具体看服务，https://angular.io/tutorial/toh-pt4，服务负责向组件提供数据，组件将调用一个可观察对象。全部在该教程中解释 link。

从这里您可以简单地将数据从组件绑定到 html 模板。

Answer 2

我认为您走在正确的道路上。 APP_INITIALIZER 是应用程序初始化函数的集合，也可以是异步的。

基本上这意味着，它可以让您推迟初始化过程，直到完成某个任务（例如加载一些数据）。

@NgModule({
  ...
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        // return a promise here 
      },
      multi: true
    }
  ]
})
export class AppModule {}

为了使这项工作正常进行，您需要能够访问任何 API 您想要调用的将延迟您的进程的内容。例如，如您所提到的，如果您有一个将获取配置对象的异步调用，则此异步调用需要在工厂函数内完成，而工厂函数又将 return 一个承诺。

例如：

    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        return new Promise((resolve, reject) => {
          SOME_GLOBAL_WITH_ASYNC_API.fetchConfig(resolve, reject);
        });
      },
      multi: true
    }

其中 SOME_GLOBAL_WITH_ASYNC_API.fetchConfig 是您要调用以获取配置的异步函数。

类似的东西。

希望对您有所帮助。

将数据从 head 传递到 body in html 到 bootstrap 一个 angular app

pass data from head to body in html to bootstrap an angular app

html

javascript

bootstrapping

angular