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

Мне очень сложно создавать глобальные переменные в моем приложении Angular 2.

Я уже гуглил и читал много сообщений на 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 в каждый компонент вручную, поэтому я хочу использовать функцию поставщиков.

Я очень надеюсь, что вы сможете мне помочь, и еще раз извиняюсь.

С уважением,

AE

Вы можете получить доступ к 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'sродительском компоненте или даже в 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 , где single Globalsиспользуется тремя компонентами, и один из них может изменять значение Globals.role.

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

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

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
}

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

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

Index.html

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

Компонент или что-то еще в Angular

..вверху справа после импорта:

declare const myTest: any;

...потом:

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

Вы можете использовать объект Window и получать к нему доступ в любом месте. пример window.defaultTitle = "мой заголовок"; тогда вы можете получить доступ к window.defaultTitle, ничего не импортируя.