Angular 4/5/6 전역 변수

116

Angular 2 응용 프로그램에서 전역 변수를 만드는 데 정말 어려움을 겪습니다.

나는 이미 지난 3 시간 동안 StackOverflow에 대한 많은 게시물을 검색하고 읽었지만 작동하지 못하는 것 같습니다. 저를 도와 주실 수 있기를 바랍니다.이 질문에 대해 사과드립니다.

그래서 다음과 같은 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

그것은 내 전역 변수를 저장하려는 내 클래스 전역이어야합니다. 예를 들어, 전역 변수가 작동하는지 테스트하기 위해 현재 문자열 "test"가 있어야하는 "role"변수가 있습니다.

— AE

그래도 유효한 typescript가 아닙니다.

— zerkms

"var"를 제거해야합니까?

— AE

사용은 localStorage어떻습니까?

— suhailvs jul.

180

Angular 종속성 주입을Globals 통해 앱의 모든 지점에서 엔티티에 액세스 할 수 있습니다 . 일부 구성 요소의 템플릿에 값 을 출력 하려면 다른 서비스와 마찬가지로 구성 요소의 생성자를 통해 주입해야 합니다.Globals.roleGlobals

// 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에 대한 간단한 데모를 만들었습니다 . 여기서 단일 Globals구성 요소는 3 개 구성 요소간에 공유되고 그중 하나는 Globals.role.

— 찌르다
소스

3

하지만 다른 구성 요소 (something = globals.role;)에서 가져 오면 'test'를 얻습니다. 할당 한 값이 아닙니다.

— punkouter

3

@punkouter Plunker 데모 링크로 답변을 업데이트했습니다. 도움이 되길 바랍니다!

— dhilt

3

이것은 다소 오래된 실이지만 나는 당신을 사랑한다고 말하고 싶습니다. 내 하루를 구했습니다!

— Nie Selam

2

@AtulStha 방금 데모를 Plunker에서 Stackblitz로 옮겼습니다.

— dhilt

1

@GauravSachdeva 문제를 별도의 질문으로 게시 할 수 있습니다. 이것이 최선의 선택이라고 생각합니다. 내가보기를 원한다면 댓글에 링크를 추가하세요.

— dhilt

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에서 전역을 만들 필요가 없습니다. 위의 내보내기를 사용하여 app 디렉토리에 globals.ts를 만들고 해당 전역을 사용하려는 위치에이 파일을 가져 오면됩니다.

— PrasadW

1

나는 동의한다. 나는 최근 @PrasadW가 지적한 것과 똑같이이 솔루션을 수정했습니다.

— Martin Slavkovsky

새로운 Angular 버전은 이제 기본적으로 정확히 그 접근 방식을 사용합니다. 거기에있다 environments/environment.ts그리고 environments/environment.prod.ts그것은 자동으로 대체됩니다.

— rugk

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