将页面上的json对象传递给Angular2组件
[英]Pass json object on page to Angular2 component
问题描述
我了解服务是将数据获取到应用程序的首选方式。 但是，它的数据已经作为js变量显示在页面上。 本质上是在寻找如何使用Angular进行以下操作：
var foo = {key1:value2, key2:value2};
myInitFunction( foo );
// This function may be on the page or in an external doc
myInitFunction( foo ){
// Do stuff with foo…
}
本质上， foo在页面加载时作为服务器端对象存在。 再次调用Ajax来获取此信息对我来说似乎很愚蠢。 Foo可能存在于其他地方，例如：
<span data-foo="{key1:value2, key2:value2}}></span>
如果这样可以更轻松地将数据导入我的应用…
3 个解决方案
解决方案1
1 已采纳 2016-10-24 22:14:32
一种简单的方法是将其作为全局变量存储在index.html ，例如：
<html>
<head>
<title>Angular QuickStart</title>
<!-- BASIC ANGULAR 2 INDEX HTML -->
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
<script>
// Store your value in some global scope variable.
window.foo = {key1:'value2', key2:'value2'};
</script>
</body>
</html>
然后，您可以将此值包装在某些Angular2服务中
@Injectable()
export class FooService {
getFoo() {
return window.foo;
}
}
解决方案2
0 2016-10-24 22:17:59
当您引导应用程序（主）模块时，我假设此范围位于您的初始html页面上，如果是这样，则可以执行一些jquery并将此值分配给全局变量。 （如
var meyVar = $（'＃mySpan'）。attr（'data-foo'）
），然后在角度组件中声明 myVar，然后可以访问它。
declare _myVar;
alert(_myvar)
解决方案3
0 2016-10-24 22:28:34
我认为解决方案将是一个自定义值提供程序，然后您可以在应用程序中对其进行依赖注入。 检出： https : //angular.io/docs/ts/latest/guide/dependency-injection.html
在您的index.html中：
<script>
window.config = {key1:value2, key2:value2};
</script>
然后在你的app.module中
import { OpaqueToken } from '@angular/core';
export let APP_CONFIG = new OpaqueToken('app.config');
/* ... */
@NgModule({
/* ... */
providers: [{ provide: APP_CONFIG, useValue: window.config }]
})
class AppModule {}
将函数从angular1传递到降级的angular2分量
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.