Угловые 4/5/6 глобальные переменные

Я действительно борется с созданием глобальных переменных в моем приложении Angular 2.

Я уже googled и прочитал много сообщений в StackOverflow об этом в течение последних 3 часов, однако кажется, что я просто не могу заставить его работать. Я действительно надеюсь, что вы можете мне помочь, и я приношу свои извинения за задание этого вопроса.

Итак, у меня есть файл с именем globals.ts, который выглядит так:

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


@Injectable()
export class Globals {

  var role = 'test';

}

И я хочу использовать роль переменной в своем HTML-представлении моего компонента следующим образом:

{{ role }}

Я уже добавил файл globals.ts в свой app.module.ts следующим образом:

providers: [
  Globals
],

Независимо от того, что я сделал в этом файле, это просто не сработало. То, что я не хочу делать, - это импортировать файл globals.ts в каждый компонент вручную, поэтому я хочу использовать функцию поставщиков.

Я действительно надеюсь, что ты сможешь помочь мне и снова пожалеть.

С уважением,

A E

Ответ 1

Вы можете получить доступ к сущности Globals из любой точки вашего приложения с помощью внедрения angular зависимости. Если вы хотите вывести значение Globals.role в некотором шаблоне компонента, вы должны внедрить Globals через конструктор компонента, как и любой сервис:

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

Я предоставил Globals в HelloComponent, но вместо этого он мог быть предоставлен в некотором родительском компоненте HelloComponent или даже в AppModule. Это не будет иметь значения, пока ваш Globals не будет иметь только статические данные, которые нельзя изменить (скажем, только константы). Но если это не так и, например, различные компоненты/службы могут захотеть изменить эти данные, то Globals должен быть одноэлементным. В этом случае он должен быть предоставлен на самом верхнем уровне иерархии, где он будет использоваться. Допустим, это 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
  ]
})

Кроме того, невозможно использовать var, как вы это сделали, это должно быть

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

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

Обновление

Наконец, я создал простую демонстрацию по stackblitz, где один Globals распределяется между 3 компонентами, и один из них может изменить значение Globals.role.

Ответ 2

Я использую среду для этого. Он работает автоматически, и вам не нужно создавать новый сервис для инъекций, и он наиболее полезен для меня, не нужно импортировать через конструктор.

1) Создайте переменную окружения в вашей среде.

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

2) Импортируйте environment.ts в файл *.ts и создайте открытую переменную (т.е. "Env") для использования в шаблоне html.

import { environment } from 'environments/environment';

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

3) Используйте это в шаблоне...

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

в *.ts...

env.isContentLoading = false

(или просто environment.isContentLoading, если он вам не нужен для шаблона)

Вы можете создать свой собственный набор глобалов в среде environment.ts следующим образом:

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

и импортировать напрямую эти переменные (у)

Ответ 3

Не очень рекомендуется, но ни один из других ответов не является глобальными переменными. Для действительно глобальной переменной вы можете сделать это.

Index.html

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

Компонент или что-нибудь еще в Angular

... рядом с правым верхним краем после импорта:

declare const myTest: any;

... позже:

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