在 html 中从头到体传递数据以引导一个有角度的应用程序
[英]pass data from head to body in html to bootstrap an angular app
问题描述
I am working on an app which part of it is based on mvc razor and vanilla javascript and some part of it is an angular app.
我正在开发一个应用程序，它的一部分基于 mvc razor 和 vanilla javascript，其中一部分是一个有角度的应用程序。 I need to pass some json data generated from an script in head of the page to the body part which is an angular app.我需要将从页面头部的脚本生成的一些 json 数据传递给作为角度应用程序的主体部分。 The format is something like this:格式是这样的：
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>
In the code snippet above, I need to pass the result of the api async call to the angular app, what would be the best approach to do so?在上面的代码片段中，我需要将 api 异步调用的结果传递给 angular 应用程序，这样做的最佳方法是什么？ I know that angular has a concept of app initializer like this:我知道 angular 有一个这样的应用程序初始化器的概念：
provide: APP_INITIALIZER, useFactory: DataFactory, multi: true, deps: [dataService] }
but still I am very lost on how pass something from head to body and make angular app wait for that value to be fetched completely in some sort of promise before it starts bootstrapping.但我仍然对如何将某些东西从头传递到身体并让 angular 应用程序在开始引导之前以某种承诺完全获取该值感到非常迷茫。 Any help or code example would be appreciated任何帮助或代码示例将不胜感激
2 个解决方案
解决方案1
1 已采纳 2018-02-11 12:33:56
I think you're on the right path here.我认为你在这里走在正确的道路上。 APP_INITIALIZER is a collection of app initialization functions which can be async as well. APP_INITIALIZER是应用程序初始化函数的集合，它们也可以是异步的。
Basically what this means is, it lets you defer the initialization process until a certain task is done (eg loading some data).这基本上意味着，它允许您推迟初始化过程，直到完成某个任务（例如加载一些数据）。
@NgModule({
...
providers: [
{
provide: APP_INITIALIZER,
useFactory: () => {
// return a promise here
},
multi: true
}
]
})
export class AppModule {}
In order to make this work, you need to have access to whatever API you want to call that will defer your process.为了使这项工作发挥作用，您需要有权访问您要调用的任何 API，这将推迟您的流程。 For example, if, as you've mentioned, you have an async call that will fetch a config object, this async call needs to be done from within the factory function, which will in turn return a promise.例如，如果，正如您所提到的，您有一个将获取配置对象的异步调用，则该异步调用需要在工厂函数中完成，而工厂函数又将返回一个承诺。
For example:例如：
{
provide: APP_INITIALIZER,
useFactory: () => {
return new Promise((resolve, reject) => {
SOME_GLOBAL_WITH_ASYNC_API.fetchConfig(resolve, reject);
});
},
multi: true
}
Where SOME_GLOBAL_WITH_ASYNC_API.fetchConfig is your async function you want to call to fetch your config.其中SOME_GLOBAL_WITH_ASYNC_API.fetchConfig是您要调用以获取配置的异步函数。
Something along those lines.沿着这些路线的东西。
Hope this helps.希望这可以帮助。
解决方案2
0 2018-02-11 06:57:03
Perhaps it's a good idea to quickly read through the Angular architecture overview documentation https://angular.io/guide/architecture , it gives you a great holistic explanation of how it is all meant to function.也许快速通读 Angular 架构概述文档https://angular.io/guide/architecture是个好主意，它为您提供了关于它如何运作的全面解释。
Specifcally look at services, https://angular.io/tutorial/toh-pt4 , services are responsible for feeding data to a component, the component will be calling an observable.具体看services， https: //angular.io/tutorial/toh-pt4，services负责向组件馈送数据，组件会调用一个observable。 All explained in that tutorial link.所有这些都在该教程链接中进行了解释。
From here you can simply data bind the data from the component into the html template.从这里您可以简单地将组件中的数据绑定到 html 模板中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.