Question

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

CODE：

    <!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 app，这样做的最佳方法是什么？我知道angular有一个app初始化器的概念，如下所示：

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

但是我仍然非常迷失于如何从头到身传递某些内容并让角度应用程序在开始引导之前等待该值完全在某种承诺中获取。任何帮助或代码示例将不胜感激

Answer 1

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

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

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

为了使这项工作成功，您需要访问要调用的任何API，这将推迟您的流程。例如，如果你正如你所提到的那样，你有一个异步调用来获取一个配置对象，那么这个异步调用需要在工厂函数中完成，而工厂函数又将返回一个promise。

例如：

    {
      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是您要调用的异步函数，以获取您的配置。

这些方面的东西。

希望这有帮助。

Answer 2

或许快速阅读Angular架构概述文档https://angular.io/guide/architecture是个好主意，它为您提供了一个很好的全面解释，说明它的功能是什么。

具体查看服务https://angular.io/tutorial/toh-pt4，服务负责向组件提供数据，组件将调用可观察的数据。所有在该教程链接中解释。

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

在html中将数据从头部传递到主体以引导角度应用程序

2 个答案: