angular - tutorial - template reference variable




Variáveis Globais Angulares 4/5/6 (2)

Eu realmente luto com a criação de variáveis ​​globais no meu aplicativo Angular 2.

Eu já pesquisei no Google e li muitas mensagens 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.

Então eu tenho meu arquivo chamado globals.ts , que se parece com isso:

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


@Injectable()
export class Globals {

  var role = 'test';

}

E eu quero usar o papel variável na minha visão HTML do meu componente assim:

{{ role }} 

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

providers: [
  Globals
],

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

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

Cumprimentos,

AE


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 ambiente.

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 template html

import { environment } from 'environments/environment';

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

3) Use no modelo ...

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

em * .ts ...

env.isContentLoading = false 

(ou apenas environment.isContentLoading no caso de você não precisar dele para o template)

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

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

e importar diretamente essas variáveis ​​(y)


Você pode acessar a entidade Globals de qualquer ponto do seu aplicativo por meio de injeção de dependência angular . Se você quiser dar saída Globals.role valor Globals.role no template de algum componente, você deve injetar 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, ele poderia ser fornecido em algum componente pai HelloComponent's ou até mesmo no AppModule . Não importará até que o Globals tenha apenas dados estáticos que não puderam ser alterados (apenas constantes). Mas se não for verdade e, por exemplo, diferentes componentes / serviços podem alterar esses dados, então os Globals devem ser um singleton . Nesse caso, ele deve ser fornecido no nível mais alto da hierarquia onde será usado. Digamos que este seja o 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 do jeito que você fez, deve ser

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

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

Atualizar

Por fim, criei uma demonstração simples em stackblitz , onde os globals únicos estão sendo compartilhados entre três componentes e um deles pode alterar o valor de Globals.role .







typescript