Я хочу, чтобы некоторые переменные были доступны везде в Angular 2
на языке Typescript
. Как мне этого добиться?
Вот простейшее решение без Service
и Observer
:
Поместите глобальные переменные в файл и экспортируйте их.
//
// ===== File globals.ts
//
'use strict';
export const sep='/';
export const version: string="22.2.2";
Чтобы использовать глобальные переменные в другом файле, используйте оператор импорта
:
import * as myGlobals from './globals';
.
Пример:
//
// ===== File heroes.component.ts
//
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {HeroService} from './hero.service';
import {HeroDetailComponent} from './hero-detail.component';
import {Hero} from './hero';
import * as myGlobals from './globals'; //<==== this one
export class HeroesComponent implements OnInit {
public heroes: Hero[];
public selectedHero: Hero;
//
//
// Here we access the global var reference.
//
public helloString: string="hello " + myGlobals.sep + " there";
...
}
}
Спасибо @eric-martinez
Мне нравится решение от @supercobra. Я просто хотел бы немного улучшить его. Если вы экспортируете объект, который содержит все константы, вы могли бы просто использовать ES6 в импорт модуль без использования требуют.
Я также использовал объект.заморозить, чтобы принять свойства стали истинными константами. Если вас интересует данная тема, вы можете прочитать этот пост.
// global.ts
export const GlobalVariable = Object.freeze({
BASE_API_URL: 'http://example.com/',
//... more of your variables
});
Смотрите модуль, используя импорт.
//anotherfile.ts that refers to global constants
import { GlobalVariable } from './path/global';
export class HeroService {
private baseApiUrl = GlobalVariable.BASE_API_URL;
//... more code
}
Совместная служба - лучший подход
export class SharedService {
globalVar:string;
}
Но вы должны быть очень внимательны при его регистрации, чтобы иметь возможность использовать один экземпляр для всего приложения. Вы должны определить это при регистрации приложения:
bootstrap(AppComponent, [SharedService]);
но не определять его снова в атрибутах providers
ваших компонентов:
@Component({
(...)
providers: [ SharedService ], // No
(...)
})
В противном случае для компонента и его подкомпонентов будет создан новый экземпляр вашего сервиса.
Вы можете взглянуть на этот вопрос о том, как работают инъекции зависимостей и иерархические инжекторы в Angular2:
Вы можете заметить, что вы также можете определить Observable
свойства в сервисе, чтобы уведомлять части вашего приложения, когда ваши глобальные свойства изменяются:
export class SharedService {
globalVar:string;
globalVarUpdate:Observable<string>;
globalVarObserver:Observer;
constructor() {
this.globalVarUpdate = Observable.create((observer:Observer) => {
this.globalVarObserver = observer;
});
}
updateGlobalVar(newValue:string) {
this.globalVar = newValue;
this.globalVarObserver.next(this.globalVar);
}
}
Более подробную информацию смотрите в этом вопросе:
См. например https://stackoverflow.com/questions/35993778/angular-2-implementation-of-shared-services
@Injectable()
export class MyGlobals {
readonly myConfigValue:string = 'abc';
}
@NgModule({
providers: [MyGlobals],
...
})
class MyComponent {
constructor(private myGlobals:MyGlobals) {
console.log(myGlobals.myConfigValue);
}
}
или предоставить отдельные значения
@NgModule({
providers: [{provide: 'myConfigValue', useValue: 'abc'}],
...
})
class MyComponent {
constructor(@Inject('myConfigValue') private myConfigValue:string) {
console.log(myConfigValue);
}
}
Создать глобальные переменные класса в приложение/глобалы.ц:
import { Injectable } from '@angular/core';
Injectable()
export class Globals{
VAR1 = 'value1';
VAR2 = 'value2';
}
В компоненте:
import { Globals } from './globals';
@Component({
selector: 'my-app',
providers: [ Globals ],
template: `<h1>My Component {{globals.VAR1}}<h1/>`
})
export class AppComponent {
constructor(private globals: Globals){
}
}
Примечание: Вы можете добавить Глобалс провайдера напрямую к модулю, а не компонент, и вам не нужно будет добавить в качестве поставщиков для каждого компонента в этом модуле.
@NgModule({
imports: [...],
declarations: [...],
providers: [ Globals ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
Имхо для Angular2 (версия V2.2.3) самый лучший способ-добавить услуги, которые содержат в глобальную переменную и ввести их в компоненты без тегов поставщиков
внутри @компонент
аннотация. Таким образом, Вы сможете обмениваться информацией между компонентами.
Образец услуги, что является собственником глобальную переменную:
import { Injectable } from '@angular/core'
@Injectable()
export class SomeSharedService {
public globalVar = '';
}
Образец компонента, обновления значение глобальной переменной:
import { SomeSharedService } from '../services/index';
@Component({
templateUrl: '...'
})
export class UpdatingComponent {
constructor(private someSharedService: SomeSharedService) { }
updateValue() {
this.someSharedService.globalVar = 'updated value';
}
}
Образец компонента, читает значение глобальной переменной:
import { SomeSharedService } from '../services/index';
@Component({
templateUrl: '...'
})
export class ReadingComponent {
constructor(private someSharedService: SomeSharedService) { }
readValue() {
let valueReadOut = this.someSharedService.globalVar;
// do something with the value read out
}
}
обратите внимание, что поставщики: [ SomeSharedService ] должны **** не будут добавлены в аннотации ваш
@компонентов
. Не добавив этот укол линия всегда даст вам один и тот же экземплярSomeSharedService
. Если вы добавите в строке только что созданного экземпляра впрыскивается.
Я не'т знать, лучший способ, но самый простой способ, если вы хотите определить глобальную переменную внутри компонента, чтобы использовать "окно" переменной, в которую записывается так:
окна.GlobalVariable = "что-нибудь!"
в
вы Don'т нужна, чтобы передать его в Bootstrap или импортировать его из других мест, и это доступно в глобальном масштабе для всех JS (не только угловые 2 компонентов).
Что's пути я использую это:
глобальные.ТС
export var server: string = 'http://localhost:4200/';
export var var2: number = 2;
export var var3: string = 'var3';
использовать его просто импортировать так:
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import * as glob from '../shared/global'; //<== HERE
@Injectable()
export class AuthService {
private AuhtorizationServer = glob.server
}
Отредактированы: Заглянувшему на "_" и префикс, как рекомендовано.
Я думаю, лучший способ-это разделить объект с глобальными переменными в приложении, экспортируя и импортируя его, где вы хотите.
Сначала создайте новую .ТС файл например глобалс.Ц и объявить объект. Я дал ему объекта тип, но вы также можете использовать любой тип или {}
export let globalVariables: Object = {
version: '1.3.3.7',
author: '0x1ad2',
everything: 42
};
После этого импортировать его
import {globalVariables} from "path/to/your/globals.ts"
И использовать его
console.log(globalVariables);