Variáveis globais angulares 4/5/6

116

Eu realmente tenho dificuldade em criar variáveis globais em meu aplicativo Angular 2.

Eu já pesquisei e li muitos posts no StackOverflow sobre isso nas últimas 3 horas, no entanto, parece que não consigo fazer funcionar. Eu realmente espero que você possa me ajudar e peço desculpas por fazer esta pergunta.

Portanto, tenho meu arquivo chamado globals.ts , que se parece com isto:

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


@Injectable()
export class Globals {

  var role = 'test';

}

E eu quero usar a função de variável em minha visualização HTML do meu componente assim:

{{ role }}

Já adicionei o arquivo globals.ts ao meu app.module.ts da seguinte maneira:

providers: [
  Globals
],

Não importa o que eu fiz neste arquivo, simplesmente não funcionou. O que não quero fazer é importar manualmente o arquivo globals.ts em cada componente, por isso quero usar o recurso de provedores.

Eu realmente espero que você possa me ajudar e sinto muito novamente.

Cumprimentos,

AE

angular typescript

— AE
fonte

4

export class Globals { var role = 'test'; }<- o que é isso?

— zerkms de

Essa deve ser minha classe Globals, na qual desejo armazenar minhas variáveis globais. Por exemplo, a variável "role", que agora deve ter uma string "test" nela, apenas para testar se as variáveis globais funcionam.

— AE

Porém, não é um texto datilografado válido.

— zerkms de

Devo remover o "var"?

— AE

que tal usar localStorage?

— suhailvs

180

Você pode acessar a Globalsentidade de qualquer ponto do seu aplicativo por meio de injeção de dependência angular . Se você quiser gerar Globals.rolevalor no modelo de algum componente, deve injetar Globalspor meio do construtor do componente como qualquer serviço:

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

Eu forneci Globalsno HelloComponent, mas em vez disso ele poderia ser fornecido em algum HelloComponent'scomponente pai ou até mesmo em AppModule. Não fará diferença até que você Globalstenha apenas dados estáticos que não puderam ser alterados (digamos, apenas constantes). Mas se não for verdade e, por exemplo, diferentes componentes / serviços podem querer alterar esses dados, então o Globalsdeve ser um singleton . Nesse caso, deve ser fornecido no nível mais alto da hierarquia onde será usado. Digamos que este seja 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
  ]
})

Além disso, é impossível usar var da maneira que você fez, deveria ser

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

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

Atualizar

Por fim, criei uma demonstração simples no stackblitz , onde o único Globalsestá sendo compartilhado entre 3 componentes e um deles pode alterar o valor de Globals.role.

— dhilt
fonte

3

Mas quando o obtenho em outro componente (something = globals.role;) recebo 'test' .. Não é o valor que atribuí.

— punkouter

3

@punkouter Eu atualizei a resposta com um link de demonstração do Plunker. Espero que ajude você!

— dhilt

3

Este é um tópico antigo, mas eu só quero dizer que te amo. Salvei meu dia!

— Nie Selam

2

@AtulStha Acabei de mudar a demonstração do Plunker para o Stackblitz, obrigado pelo problema.

— dhilt

1

@GauravSachdeva Você pode postar seu problema como uma pergunta separada no SO, acredito que seria a melhor opção. Adicione um link nos comentários se quiser que eu veja.

— dhilt

22

Eu uso o ambiente para isso. Ele funciona automaticamente e você não precisa criar um novo serviço injetável e, o mais útil para mim, não precisa importar via construtor.

1) Crie uma variável de ambiente em seu environment.ts

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

2) Importe o environment.ts no arquivo * .ts e crie uma variável pública (ou seja, "env") para poder usar no modelo html

import { environment } from 'environments/environment';

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

3) Use-o no modelo ...

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

em * .ts ...

env.isContentLoading = false

(ou apenas environment.isContentLoading, caso você não precise dele para o modelo)

Você pode criar seu próprio conjunto de globais em environment.ts assim:

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

e importe diretamente essas variáveis (y)

— Martin Slavkovsky
fonte

1

E quando você faz a construção de produção? Você tem tudo em dois lugares?

— Mulperi,

2

Esta é a melhor maneira. @Mulperi Não é necessário criar globais em environment.ts. Apenas crie um globals.ts no diretório do aplicativo com as exportações acima e importe este arquivo onde deseja usar esses globais.

— PrasadW de

1

Concordo. Recentemente, modifiquei esta solução exatamente como @PrasadW apontou.

— Martin Slavkovsky

As novas versões Angular usam exatamente essa abordagem por padrão agora. Existe um environments/environment.tse environments/environment.prod.tsque são substituídos automaticamente.

— rugk

0

Não é realmente recomendado, mas nenhuma das outras respostas são realmente variáveis globais. Para uma variável verdadeiramente global, você poderia fazer isso.

Index.html

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

Componente ou qualquer outra coisa em Angular

..perto do canto superior direito após as importações:

declare const myTest: any;

...mais tarde:

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

— Helzgate
fonte

-2

Você pode usar o objeto Window e acessá-lo em qualquer lugar. exemplo window.defaultTitle = "meu título"; então você pode acessar window.defaultTitle sem importar nada.

— Justice Addico
fonte

Isso é o que ele deseja evitar.

— Scandinave

Variáveis ​​globais angulares 4/5/6

Index.html

Componente ou qualquer outra coisa em Angular

Variáveis globais angulares 4/5/6