Question

我了解服务是将数据导入应用程序的首选方式。但是，数据作为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>

如果这样可以让数据更容易进入我的应用程序......

Answer 1

一种简单的方法是将其作为全局变量存储在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;
    }
}

Answer 2

我认为当您引导应用程序（主）模块时，此跨度位于您的初始html页面上，如果是，那么您可以执行一些jquery并将此值分配给全局变量。（例如

var meyVar = $（＆＃39;＃mySpan＆＃39;）。attr（＆＃39; data-foo＆＃39;）

）然后在你的角度组件中声明 myVar，你可以访问它。

declare _myVar;
alert(_myvar)

Answer 3

我认为解决方案是自定义值提供程序，然后您可以在应用程序中使用依赖注入。查看： 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 {}

将页面上的json对象传递给Angular2组件

3 个答案: