Angular 4/5/6 Variáveis Globais

Question

Angular 4/5/6 Variáveis Globais

Eu realmente luto com a criação de variáveis globais na minha aplicação Angular 2.

Eu já pesquisei e li muitos posts sobre StackOverflow sobre isso nas últimas 3 horas, no entanto parece que eu não posso fazer isso funcionar. Espero que me possa ajudar e peço desculpa por fazer esta pergunta.

Tenho o meu ficheiro chamado globals.ts , que se parece com isto:

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


@Injectable()
export class Globals {

  var role = 'test';

}

e eu quero usar o papel variável na minha vista HTML do meu componente como isto:

{{ role }}

Já adicionei os globais.ts ficheiro para a minha aplicação .modulo.ts da seguinte forma:

providers: [
  Globals
],

Não importa o que fiz neste ficheiro, não funcionou. O que eu não quero fazer é ter de importar os globais.o arquivo ts em cada componente manualmente, e é por isso que eu quero usar a funcionalidade de provedores.

Espero que me possas ajudar e pedir desculpa outra vez.

melhores cumprimentos,

A E

54

angular typescript

Author: dhilt, 2017-05-16

Source

2 answers

Uso o ambiente para isso. Ele funciona automaticamente e você não tem que criar um novo serviço injetável e mais útil para mim, não precisa importar através do construtor.

1) Criar uma variável de ambiente no seu ambiente .ts

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

2) ambiente de importação.TS in *.ts file and create public variable (i.e. "env") to be able to use in html template

import { environment } from 'environments/environment';

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

3) Utilize-o no modelo...

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

In *.ts ...

env.isContentLoading = false

(Ou apenas ambiente.isContentLoading no caso de não precisar dele para o modelo)

Você pode criar seu próprio conjunto de globals dentro do ambiente.é assim:

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

E importar directamente estas variáveis (y)

4

Author: Martin Slavkovsky, 2018-08-03 08:39:45

score 91 · Accepted Answer

Pode aceder à entidade Globalsa partir de qualquer ponto da sua aplicação via injecção de dependência Angular. Se quiser mostrar o valor Globals.role no modelo de algum componente, deve injectar Globals através 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(private globals: Globals) {}
}

Eu forneci Globals no HelloComponent, mas em vez disso poderia ser fornecido em algum HelloComponent's componente inicial ou mesmo em AppModule. Não importará até que o seu Globals tenha apenas dados estáticos que não possam ser alterados (apenas constantes). Mas se não é verdade e, por exemplo, diferentes componentes / Serviços podem alterar esses dados, então o Globals deve ser um singleton . Nesse caso, deve ser fornecida no nível mais alto da hierarquia onde vai ser utilizada. Digamos que isto é ... 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 forma como o fizeste, deve ser

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

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

Actualizar

Finalmente, criei uma demonstração simples em stackblitz, onde o single está a ser compartilhado entre 3 componentes e um deles pode mudar o valor de Globals.role.