ページのjsonオブジェクトをAngular2コンポーネントに渡す

私は、サービスがデータをアプリに取り込むのに好ましい方法だと思います。しかし、そのデータはすでにjs変数としてページ上にあります。基本的にあなたが角度で次の操作を実行したい方法を探して：ページのjsonオブジェクトをAngular2コンポーネントに渡す

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の呼び出しを行うことは私には馬鹿馬鹿しいようです（もう一度）。それは簡単に私のアプリにデータを取得して行った場合、それを行うための簡単な方法は、例えば、あなたのindex.htmlにグローバル変数としてそれを格納することです...

<span data-foo="{key1:value2, key2:value2}}></span>

出典

2016-10-24 Justin W Hall

を：：Fooのは次のように別の場所に存在する可能性があり

<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; 
    } 
}

出典

2016-10-24 22:14:32

ああで。これは完璧な意味合いがあります。どうもありがとう。 –

サービス内でグローバルな 'window'を使用するのではなく、' window'をより「角度的に」注入する正しい方法について議論しています。 http://stackoverflow.com/questions/34177221/angular2-how-to-inject-window-into-an-angular2-serviceを参照してください。 –

私はこのスパンがあなたのアプリケーション（メイン）モジュールをブートストラップするとき、最初のhtmlページにあると仮定します。もしそうなら、jqueryを実行してこの値をグローバル変数に代入することができます。（のような

VAR meyVar = $（ '＃のmySpan'）。attrの（ 'データ-FOO'）

）、その後、あなたの角度成分にあなたが myVarを宣言とすることができますそれにアクセスする。

declare _myVar; alert(_myvar)

出典

2016-10-24 22:17:59

解決策はカスタムバリュープロバイダーであると思うので、アプリケーション内でそれを使用することができます。チェックアウト： 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 {}

出典

2016-10-24 22:28:34

ページのjsonオブジェクトをAngular2コンポーネントに渡す

答えて

関連する問題