Pass json Objekt auf Seite zu Angular2 Komponente

Ich verstehe, dass Dienste die bevorzugte Möglichkeit sind, Daten in eine App zu bekommen. Wie auch immer, die Daten befinden sich bereits auf der Seite als js Variable. Im Grunde suchen, wie Sie die folgenden mit kantigem tun würde:Pass json Objekt auf Seite zu Angular2 Komponente

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

Im Wesentlichen besteht foo auf Seite Last als bereits Objekt-Server-Seite. Es erscheint mir albern, einen Ajax-Anruf zu machen, um diese Information (wieder) zu bekommen. Foo könnte an anderer Stelle mag vorhanden sein:

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

Wenn das erleichtert die Daten in meine app bekommen ...

Quelle

2016-10-24 Justin W Hall

Eine einfache Möglichkeit, es zu tun ist, um es zu speichern als globaler Variable in Ihrem index.html zum Beispiel:

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

Und dann können Sie diesen Wert in einigen Angular2 Service wickeln

@Injectable() 
export class FooService { 
    getFoo() { 
     return window.foo; 
    } 
}

Quelle

2016-10-24 22:14:32

Ah. Das macht Sinn. Danke vielmals. –

Anstatt nur ein globales 'Fenster' in einem Dienst zu verwenden, gibt es einige Diskussionen über die richtige Art und Weise,' Fenster' auf eine mehr "eckige Weise" zu injizieren. Siehe http://stackoverflow.com/questions/34177221/angular2-how-to-inject-window-into-an-angular2-service –

Ich gehe davon aus, dass dieser Bereich auf der HTML-Seite zu sehen ist, wenn Sie das App (Haupt-) Modul starten. Wenn ja, können Sie einige Abfragen ausführen und diesen Wert einer globalen Variable zuweisen. (Wie

var meyVar = $ ('# mySpan'). Attr ('data-foo')

) und dann in der Winkelkomponente Sie meineVar erklären und Sie können darauf zuzugreifen.

Quelle

2016-10-24 22:17:59

Ich denke, die Lösung wäre ein benutzerdefinierter Wertanbieter, dann können Sie die Abhängigkeitsinjektion damit in Ihrer Anwendung verwenden. Check out: https://angular.io/docs/ts/latest/guide/dependency-injection.html

In Ihrem index.html:

<script> 
    window.config = {key1:value2, key2:value2}; 
</script>

Und dann in Ihrem 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 {}

Quelle

2016-10-24 22:28:34

Pass json Objekt auf Seite zu Angular2 Komponente

Antwort

Verwandte Themen