在 html 中从头到体传递数据以引导一个有角度的应用程序

Question

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

代码：

    <!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] }

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

Answer 1

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

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

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

为了使这项工作发挥作用，您需要有权访问您要调用的任何 API，这将推迟您的流程。 例如，如果，正如您所提到的，您有一个将获取配置对象的异步调用，则该异步调用需要在工厂函数中完成，而工厂函数又将返回一个承诺。

例如：

    {
      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是个好主意，它为您提供了关于它如何运作的全面解释。

具体看services， https: //angular.io/tutorial/toh-pt4，services负责向组件馈送数据，组件会调用一个observable。 所有这些都在该教程链接中进行了解释。

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

在 html 中从头到体传递数据以引导一个有角度的应用程序

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-02-11 12:33:56

解决方案2
0 2018-02-11 06:57:03

在 html 中从头到体传递数据以引导一个有角度的应用程序

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-02-11 12:33:56

解决方案2 0 2018-02-11 06:57:03

解决方案1
1 已采纳 2018-02-11 12:33:56

解决方案2
0 2018-02-11 06:57:03