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

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

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

Итак, у меня есть мой файл под названием глобалы.ТС, который выглядит так:

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


@Injectable()
export class Globals {

  var role = 'test';

}

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

{{ role }}

Я уже добавил глобальные.файл ТС в моем приложение.модуль.ТС следующим образом:

providers: [
  Globals
],

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

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

С уважением,

Е

2 54
angularjs typescript

2 ответа:

вы можете получить доступ к Globals сущность из любой точки вашего приложения через инъекция угловой зависимости. Если вы хотите вывести 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(private 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
  ]
})

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

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

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

обновление

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

91

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

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

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

2) импорт среде.ТС in *.файл TS и создать общественные переменная (т. е. "env"), чтобы иметь возможность использовать в HTML-шаблоне

import { environment } from 'environments/environment';

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

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

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

in *.ТС ... 

env.isContentLoading = false

(или просто окружающей среде.isContentLoading в случае, если вам это не нужно для шаблона)

вы можете создать свой собственный набор глобальных переменных в окружающей среде.ц вот так:

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

и импортировать непосредственно эти переменные (y)

4