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

116

Мне очень сложно создавать глобальные переменные в моем приложении 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

angular typescript

— AE
источник

4

export class Globals { var role = 'test'; }<- что это?

— zerkms

Это должен быть мой класс Globals, в котором я хочу хранить свои глобальные переменные. Например, переменная «роль», в которой прямо сейчас должна быть строка «test», просто чтобы проверить, работают ли глобальные переменные.

— AE

Однако это недопустимый машинописный текст.

— zerkms

Стоит ли убрать "вар"?

— AE

как насчет использования localStorage?

— suhailvs

180

Вы можете получить доступ к 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.

— dhilt
источник

3

Но когда я получаю его в другом компоненте (something = globals.role;), я получаю "test" .. Не то значение, которое я ему присвоил.

— punkouter

3

@punkouter Я обновил ответ демонстрационной ссылкой Plunker. Надеюсь, это поможет вам!

— dhilt

3

Это несколько старая тема, но я просто хочу сказать, что люблю тебя. Спас мой день!

— Nie Selam

2

@AtulStha Я только что переместил демо с Plunker на Stackblitz, спасибо за проблему.

— dhilt 04

1

@GauravSachdeva. Вы можете опубликовать свой вопрос как отдельный вопрос на SO, я считаю, что это будет лучший вариант. Добавьте ссылку на нее в комментариях, если хотите, чтобы я ее увидел.

— dhilt 05

22

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

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)

— Мартин Славковский
источник

1

А что насчет того, когда вы создаете производственную сборку? У вас все есть в двух местах?

— Mulperi

2

Это лучший способ. @Mulperi Не обязательно создавать глобальные объекты в environment.ts. Просто создайте globals.ts в каталоге приложения с указанным выше экспортом и импортируйте этот файл, где вы хотите использовать эти глобальные файлы.

— PrasadW

1

Я согласен. Недавно я изменил это решение точно так, как указал @PrasadW.

— Мартин Славковский

Новые версии Angular по умолчанию используют именно этот подход. Есть environments/environment.tsи environments/environment.prod.tsкоторые заменяются автоматически.

— коврик

0

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

Index.html

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

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

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

declare const myTest: any;

...потом:

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

— Helzgate
источник

-2

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

— Джастис Аддико
источник

Это то, чего он хочет избежать.

— Scandinave