Angular 2 이상 / Typescript에서 글로벌 변수를 선언하려면 어떻게 해야 합니까?
나는 몇 가지 변수들이 어디에서나 접근할 수 있기를 원합니다.Angular 2에서Typescript언어.제가 이 일을 어떻게 해나가야 할까요?
다음은 없는 가장 간단한 솔루션입니다.Service또는Observer:
글로벌 변수를 파일에 넣고 내보냅니다.
//
// ===== File globals.ts
//
'use strict';
export const sep='/';
export const version: string="22.2.2";
다른 파일에서 전역을 사용하려면 다음을 사용합니다.import문: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 (**Updated**)
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";
...
}
}
저는 @supercobra의 솔루션도 좋아합니다.저는 단지 그것을 조금 개선하고 싶습니다.모든 상수를 포함하는 개체를 내보내는 경우 require를 사용하지 않고 es6 가져오기 모듈만 사용할 수 있습니다.
Object도 사용했습니다.속성이 참 상수가 되도록 고정합니다.만약 당신이 그 주제에 관심이 있다면, 당신은 이 게시물을 읽을 수 있습니다.
// 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
(...)
})
그렇지 않으면 구성 요소 및 해당 하위 구성 요소에 대해 서비스의 새 인스턴스가 생성됩니다.
Angular 2에서 종속성 주입 및 계층형 인젝터가 작동하는 방식과 관련하여 이 질문을 살펴볼 수 있습니다.
다음을 정의할 수도 있습니다.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);
}
}
자세한 내용은 이 질문을 참조하십시오.
Angular 2 - 공유 서비스 구현 예를 참조하십시오.
@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);
}
}
app/globals.ts에서 Globals 클래스를 만듭니다.
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){
}
}
참고: 구성 요소 대신 모듈에 Globals 서비스 공급자를 직접 추가할 수 있으며, 해당 모듈의 모든 구성 요소에 공급자로 추가할 필요는 없습니다.
@NgModule({
imports: [...],
declarations: [...],
providers: [ Globals ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
에 대한 의 가장 하는 서비스를 추가하여 Angular2(v2.2.3) 없이 요소에 입니다.providers부태그 안에 @Component◦이렇게 할 수 .이렇게 하면 구성 요소 간에 정보를 공유할 수 있습니다.
글로벌 변수를 소유하는 샘플 서비스:
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
}
}
:
providers: [ SomeSharedService ]에 추가해서는 안 됩니다.@Component주석 이으로써 항상 수 .SomeSharedService라인을 추가하면 새로 만든 인스턴스(instance)가 주입됩니다.
방법은 에 글로벌 쉬운 은 가좋방모지만구요성내글소부변로은방정가법쉬는운장려하의장를수벌에은법은르겠▁i▁inside방은법▁to쉬▁use▁if운▁variable가,가▁is▁way▁a장▁easiest▁but장▁global▁of는▁component▁you려정▁best▁the▁way하▁don▁the▁want▁a▁knowt'를 사용하는 것입니다.window다음과 같이 쓸 변수:
window.GlobalVariable = "what ever!"
부트스트랩으로 전달하거나 다른 위치로 가져올 필요가 없으며 모든 JS(각형 2 구성 요소뿐만 아니라)에서 전체적으로 액세스할 수 있습니다.
그게 제가 사용하는 방식입니다.
global.
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
}
편집됨: "_" 접두사가 권장대로 삭제되었습니다.
내 생각에 가장 좋은 방법은 당신이 원하는 곳으로 객체를 내보내고 가져와서 당신의 응용 프로그램 전체에서 글로벌 변수와 공유하는 것입니다.
먼저 globals.ts와 같은 새 .ts 파일을 생성하고 개체를 선언합니다.개체 유형을 지정했지만 원하는 유형 또는 {}을(를) 사용할 수도 있습니다.
export let globalVariables: Object = {
version: '1.3.3.7',
author: '0x1ad2',
everything: 42
};
그것을 가져온 후에.
import {globalVariables} from "path/to/your/globals.ts"
그리고 그것을 사용하세요.
console.log(globalVariables);
저는 @supercobra의 답변을 좋아하지만, ES6에서 이미 사용 가능한 것처럼 const 키워드를 사용할 것입니다.
//
// ===== File globals.ts
//
'use strict';
export const sep='/';
export const version: string="22.2.2";
언급URL : https://stackoverflow.com/questions/36158848/how-can-i-declare-a-global-variable-in-angular-2-and-up-typescript
'programing' 카테고리의 다른 글
| 쿼리 키의 MongoDB 와일드카드 (0) | 2023.05.13 |
|---|---|
| GitLab 토큰을 사용하여 인증 없이 복제 (0) | 2023.05.13 |
| 시작 시 셸 스크립트 실행 방법 (0) | 2023.05.13 |
| 목록을 올바르게 사용하는 방법 (0) | 2023.05.13 |
| Base64 이미지를 HTML로 표시하는 방법 (0) | 2023.05.13 |