2016-06-06 32 views
11

Ho una variabile globale js definito di seguito (@url è un HTML helper ASP.Net MVC otterrà convertito in un valore stringa):Come accedere variabile js globale nel angular2 componente

<script> 
    var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)'; 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 

Come fare Accedo rootVar in un componente angular2? Usavo il window service nell'angolare 1.5, c'è un modo analogo di farlo in angular2?

In particolare, voglio usare quella variabile rootVar per contribuire a generare la TemplateURL in questa componente:

import { Component, Inject} from '@angular/core'; 

@Component({ 
    selector: 'home-comp', 
    templateUrl: '../Home/Root' 
}) 

export class HomeComponent { 
    constructor() { } 
} 
+1

Se è globale, è globale. Ciò significa che qualsiasi parte del codice JS può accedere alla variabile. –

+1

Puoi guardare questa risposta di Thierry http://stackoverflow.com/questions/37337185/passing-asp-net-server-parameters-to-angular-2-app/37384405#37384405 – yurzui

risposta

7

è necessario aggiornare il file che bootstrap l'applicazione per esportare una funzione:

import {bootstrap} from '...'; 
import {provide} from '...'; 
import {AppComponent} from '...'; 

export function main(rootVar) { 
    bootstrap(AppComponent, [ 
    provide('rootVar', { useValue: rootVar }) 
    ]); 
} 

Ora è possibile fornire la variabile dal file index.html in questo modo:

<script> 
    var rootVar = '@Url.Action("Index","Home",new { Area = ""}, null)'; 
    System.import('app/main').then((module) => { 
    module.main(rootVar); 
    }); 
</script> 

Quindi è possibile iniettare il rootVar in componenti e servizi in questo modo:

import { Component, Inject} from '@angular/core'; 

@Component({ 
    selector: 'home-comp', 
    templateUrl: '../Home/Root' 
}) 
export class HomeComponent { 
    constructor(@Inject('rootVar') rootVar:string) { } 
} 
+0

Grazie, sono stato in grado di accedi alla variabile nel mio componente seguendo il tuo esempio, ma sto correndo in un nuovo problema. Ora che ho il rootVar che viene iniettato nel costruttore non riesco a usarlo per modificare il componente templateUrl. @Component ({ selettore: 'home-comp', templateUrl: '..{{baseUrl}} Home/Root ' }) esportazione classe HomeComponent { baseUrl: string; Costruttore (@Inject ('rootVar') rootVar: string) { this.baseUrl = rootVar; } } – cobolstinks

+0

Prego! In effetti, non è possibile utilizzare la variabile in questo modo per creare il percorso tempalteUrl. Uno è al livello della classe e dell'altra dell'istanza ... Nel tuo caso, proverei ad estendere la classe UrlResolver e inserire la tua variabile al suo interno. Vedi questo link: https://angular.io/docs/ts/latest/api/compiler/UrlResolver-class.html. –

3

Un approccio diverso sarebbe quello di esportare il var, ad es:

export var API_ENDPOINT = '@Url.Action("Index","Home",new { Area = ""}, null)'; 

e quindi importare che nel componente

import {API_ENDPOINT } 
16

Entro il componente si potrebbe fare riferimento finestra per accedere alle variabili globali in questo modo:

rootVar = window["rootVar"]; 

o

let rootVar = window["rootVar"]; 
4

Nel file componente, componente esterno definizione della classe, dichiarare rootVar, e sarà disponibile nel costruttore componente:

declare var rootVar: any; 

poi

@Component(...) 
export class MyComponent { 
    private a: any; 

    constructor() { 
    this.a = rootVar; 
    } 
} 
+1

Importante da notare. Non ho potuto ottenere la dichiarazione al di fuori della classe del componente per essere visibile a qualsiasi metodo nella classe del componente. È necessario impostare una variabile di istanza nel costruttore per fare riferimento alla variabile globale e quindi fare riferimento a tale variabile nei metodi – hewstone

0

Qui non dimenticare di lavarsi le mani ... Angolare è giusto e java criptato

//Get something from global 
let someStuffFromWindow= (<any>window).somethingOnWindow; 

//Set something 
(<any>window).somethingOnWindow="Stuff From Angular"; 

Questo è male per qualche motivo .. dovresti stare male!

Problemi correlati