Globalne zmienne kątowe 4/5

Question

Naprawdę mam problem z tworzeniem zmiennych globalnych w mojej aplikacji Angular 2.

Już googlowałem i czytałem wiele postów na temat StackOverflow w ciągu ostatnich 3 godzin, jednak wydaje mi się, że po prostu nie mogę tego zrobić. Naprawdę mam nadzieję, że możesz mi pomóc i przepraszam za zadawanie tego pytania.

Tak Mam plik o nazwie globals.ts, który wygląda tak:

import { Injectable } from "@angular/core"; 


@Injectable() 
export class Globals { 

    var role = 'test'; 

} 

I chcę użyć zmiennej rolę w moim widoku HTML mojego komponentu tak:

{{ role }} 

już dodany plik globals.ts do moich app.module.ts w następujący sposób:

providers: [ 
    Globals 
], 

Bez względu na to, co zrobiłem w tym pliku, po prostu nie działało. To, czego nie chcę robić, to ręczne importowanie pliku globals.ts do każdego komponentu, dlatego chcę korzystać z funkcji dostawców.

Naprawdę mam nadzieję, że możesz mi pomóc i znowu przepraszam.

poważaniem,

A PL

Answer 1

można uzyskać dostęp Globals podmiot z dowolnego punktu swojej aplikacji poprzez Angular dependency injection. Jeśli chcesz wstawić Globals.role wartość w szablonie jakiegoś komponentu, należy wstrzykiwać Globals przez konstruktora komponentu jak każdy usługi:

// hello.component.ts 
import { Component } from '@angular/core'; 
import { Globals } from './globals'; 

@Component({ 
    selector: 'hello', 
    template: 'The global role is {{globals.role}}', 
    providers: [ Globals ] // this depends on situation, see below 
}) 

export class HelloComponent { 
    constructor(private globals: Globals) {} 
} 

I przewidzianego Globals w HelloComponent, lecz może to być dostarczane w jakiś składnik HelloComponent's dominującej lub nawet w AppModule. Nie ma to znaczenia, dopóki Twój Globals nie będzie miał tylko statycznych danych (tylko stałe). Ale jeśli nie jest to prawdą i na przykład różne komponenty/usługi mogą zmienić te dane, to Globals musi być singleton. W takim przypadku powinien być zapewniony na najwyższym poziomie hierarchii, w której będzie używany. Powiedzmy, że jest to AppModule:

import { Globals } from './globals' 

@NgModule({ 
    // ... imports, declarations etc 
    providers: [ 
    // ... other global providers 
    Globals // so do not provide it into another components/services if you want it to be a singleton 
    ] 
}) 

Ponadto, jest to niemożliwe do zastosowania var sposób nie powinno być

// globals.ts 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class Globals { 
    role: string = 'test'; 
} 

Aktualizacja

W końcu stworzyłem prosty demo on Plunker, gdzie pojedynczy Globals jest dzielony między 3 komponenty i jeden z nich może zmienić wartość Globals.role.