Açısal 4/5/6 Global Değişkenler

116

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

Zaten son 3 saattir StackOverflow'da bu konuda birçok yazı okudum ve okudum, ancak işe yarayamıyorum gibi görünüyor. Gerçekten bana yardım edebileceğinizi umuyorum ve bu soruyu sorduğum için özür dilerim.

Globals.ts adında dosyam var , bu şuna benzer:

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


@Injectable()
export class Globals {

  var role = 'test';

}

Ve bileşenimin HTML görünümündeki değişken rolünü şu şekilde kullanmak istiyorum:

{{ role }}

Globals.ts dosyasını app.module.ts'ime şu şekilde zaten ekledim :

providers: [
  Globals
],

Bu dosyada ne yaparsam yapayım, işe yaramadı. Yapmak istemediğim şey globals.ts dosyasını her bileşene manuel olarak içe aktarmak, bu yüzden sağlayıcılar özelliğini kullanmak istiyorum.

Umarım bana yardım edebilir ve tekrar özür dilerim.

Saygılarımla,

AE

angular typescript

— AE
kaynak

4

export class Globals { var role = 'test'; }<- o nedir?

— zerkms

Bunun, global değişkenlerimi depolamak istediğim sınıf Globals olması gerekiyordu. Örneğin, sadece global değişkenlerin çalışıp çalışmadığını test etmek için, şu anda içinde bir "test" dizesi olması gereken "rol" değişkeni.

— AE

Yine de geçerli bir yazı tipi değil.

— zerkms

"Var" ı kaldırmalı mıyım?

— AE

ya kullanmaya ne dersin localStorage?

— suhailvs

180

Sen erişebilir Globalsaracılığıyla App herhangi bir noktasından varlık Açısal bağımlılık enjeksiyon . Bir Globals.rolebileşenin şablonunda değer üretmek istiyorsanız, Globalsherhangi bir hizmet gibi bileşenin yapıcısı aracılığıyla enjekte etmelisiniz :

// 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(public globals: Globals) {}
}

Ben sağlanan Globalsiçinde HelloComponent, ama bunun yerine bazı sağlanabilir HelloComponent'sebeveyn bileşen veya hattaAppModule . GlobalsYalnızca değiştirilemeyen statik verilere sahip olana kadar önemli olmayacaktır (örneğin, yalnızca sabitler). Ancak doğru değilse ve örneğin farklı bileşenler / hizmetler bu verileri değiştirmek isteyebilirse, o Globalszaman bir tekil olmalıdır . Bu durumda, kullanılacağı hiyerarşinin en üst seviyesinde sağlanmalıdır. Diyelim ki bu 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
  ]
})

Ayrıca var'ı yaptığınız gibi kullanmak imkansızdır.

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

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

Güncelleme

Sonunda , stackblitz üzerinde single'ın Globals3 bileşen arasında paylaşıldığı ve bunlardan birinin değerini değiştirebileceği basit bir demo oluşturdum Globals.role.

— dhilt
kaynak

3

Ama onu başka bir bileşende aldığımda (bir şey = globals.role;) 'test' alıyorum .. Ona atadığım değeri değil.

— punkouter

3

@punkouter Cevabı Plunker demo bağlantısı ile güncelledim. Umarım size yardımcı olur!

— 2017

3

Bu biraz eski bir konu ama sadece seni sevdiğimi söylemek istiyorum. Günümü kurtardım!

— Nie Selam

2

@AtulStha Demoyu Plunker'dan Stackblitz'e kaydırdım, sorun için teşekkürler.

— 2018

1

@GauravSachdeva Sorununuzu ayrı bir soru olarak SO'ya gönderebilirsiniz, bunun en iyi seçenek olacağına inanıyorum. Görmemi istiyorsanız yorumlara bağlantı ekleyin.

— 2018

22

Bunun için çevreyi kullanıyorum. Otomatik olarak çalışır ve yeni enjekte edilebilir servis oluşturmanıza gerek yoktur ve benim için çoğu yararlıdır, kurucu aracılığıyla içe aktarmanıza gerek yoktur.

1) çevre değişkeni oluşturun environment.ts

export const environment = {
    ...
    // runtime variables
    isContentLoading: false,
    isDeployNeeded: false
}

2) environment.ts'i * .ts dosyasına içe aktarın ve html şablonunda kullanabilmek için genel değişken (yani "env") oluşturun

import { environment } from 'environments/environment';

@Component(...)
export class TestComponent {
    ...
    env = environment;
}

3) Şablonda kullanın ...

<app-spinner *ngIf='env.isContentLoading'></app-spinner>

içinde * .ts ...

env.isContentLoading = false

(veya sadece environment.isContentLoading, şablon için ihtiyacınız olmaması durumunda)

Environment.ts içinde kendi küresel kümenizi şu şekilde oluşturabilirsiniz:

export const globals = {
    isContentLoading: false,
    isDeployNeeded: false
}

ve doğrudan bu değişkenleri içe aktarın (y)

— Martin Slavkovsky
kaynak

1

Prodüksiyon inşa ettiğinizde ne olacak? Her şey iki yerde var mı?

— Mulperi

2

Bu en iyi yoldur. @Mulperi Environment.ts içinde global oluşturmak için gerekli değildir. Uygulama dizininde yukarıdaki dışa aktarmalarla bir globals.ts oluşturun ve bu globalleri kullanmak istediğiniz yere bu dosyayı içe aktarın.

— PrasadW

1

Katılıyorum. Geçenlerde bu çözümü aynen @PrasadW'nin işaret ettiği gibi değiştirdim.

— Martin Slavkovsky

Yeni Açısal sürümler artık varsayılan olarak tam olarak bu yaklaşımı kullanmaktadır. Otomatik olarak değiştirilen bir environments/environment.tsve environments/environment.prod.tsvardır.

— rugk

0

Gerçekten tavsiye edilmez, ancak diğer yanıtların hiçbiri gerçekten küresel değişkenler değildir. Gerçekten global bir değişken için bunu yapabilirsiniz.

index.html

<body>
  <app-root></app-root>
  <script>
    myTest = 1;
  </script>
</body>

Angular'daki bileşen veya başka herhangi bir şey

..İthalatlardan sonra hemen üstte:

declare const myTest: any;

...sonra:

console.warn(myTest); // outputs '1'

— Helzgate
kaynak

-2

Window nesnesini kullanabilir ve ona her yerden erişebilirsiniz. örnek window.defaultTitle = "başlığım"; sonra hiçbir şey içe aktarmadan window.defaultTitle'a erişebilirsiniz.

— Adalet Addico
kaynak

Kaçınmak istediği şey bu.

— Scandinave