在 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