[angular] Angular 4/5/6 전역 변수

Program / 글쓴이

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 종속성 주입을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.

답변

나는 그것을 위해 환경을 사용합니다. 그것은 자동으로 작동하며 새로운 주입 가능한 서비스를 만들 필요가 없으며 가장 유용하며 생성자를 통해 가져올 필요가 없습니다.

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)

답변

실제로 권장되지는 않지만 다른 답변은 실제로 전역 변수가 아닙니다. 진정한 전역 변수의 경우 이렇게 할 수 있습니다.

Index.html

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

Angular의 구성 요소 또는 기타

.. 가져 오기 후 오른쪽 상단 근처 :

declare const myTest: any;

…나중:

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

답변

Window 개체를 사용하고 어디서나 액세스 할 수 있습니다. 예 window.defaultTitle = “내 제목”; 그런 다음 아무것도 가져 오지 않고 window.defaultTitle에 액세스 할 수 있습니다.

답변