Angular 4/5 Global Değişkenler

Question

Angular 2 uygulamamda global değişkenler yaratmakta gerçekten zorlanıyorum.

Zaten googled ve son 3 saat boyunca bu konuda StackOverflow'daki birçok mesajları okumak

, ancak ben sadece o iş yapamaz gibi görünüyor. Umarım bana yardım edebilirsin ve bu soruyu sorduğum için özür dilerim.

Yani benim dosya şöyle ki, globals.ts çağrıda:

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


@Injectable() 
export class Globals { 

    var role = 'test'; 

} 

Ve böyle benim bileşenin benim HTML görünümünde değişken rol kullanmak istiyorum:

{{ role }} 

:

zaten şu şekilde benim app.module.ts için globals.ts dosyasını eklendi

Bu dosyada ne yaptığım önemli değil, işe yaramadı. Yapmak istemediğim şey, globals.ts dosyasını her bileşende elle almak zorunda olmaktır, bu yüzden sağlayıcılar özelliğini kullanmak istiyorum.

Gerçekten yine beni ve üzgün yardımcı olabilir umuyoruz.

Saygılarımızla,

Sen Angular dependency injection aracılığıyla App herhangi bir noktasından Globals varlık erişebilir

Answer 1

bir e. Eğer çıkışa bazı bileşenin şablonda Globals.role değeri isterseniz, herhangi bir hizmet gibi bileşenin yapıcı aracılığıyla Globals enjekte edilmelidir: Ben HelloComponent içinde Globals sağlanan

// 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) {} 
} 

, ancak bunun yerine bazı HelloComponent's ebeveyn bileşeninde temin edilebileceği ya da AppModule'da bile. Globals'un yalnızca değiştirilemeyen statik verilere sahip olması önemli değildir (yalnızca sabit değerler). Ancak bu doğru değilse ve örneğin farklı bileşenler/hizmetler bu verileri değiştirebilirse, Globalssingleton olmalıdır. Bu durumda, kullanılacak hiyerarşinin en üst seviyesinde sağlanmalıdır. en bu AppModule olduğunu varsayalım: Ayrıca

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 
    ] 
}) 

, bunun Sonunda

Güncelleme

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

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

olmalıdır Var yaptın yolu kullanmak imkansız, benim yarattığım bir Basit demo on Plunker, burada tek Globals 3 bileşen arasında paylaşılıyor ve bunlardan biri Globals.role değerini değiştirebilir.