在 Angular 应用程序中获取和设置全局变量

Question

如何在 Angular 8 中获取和设置全局变量？问题是，如果我创建一个这样的文件

export class SharedService {
    globalLanguage:string;

    setGlobalVar(currentLanguage:string) {
      this.globalLanguage = currentLanguage;
    }
    getGlobalVar():string{
      return this.globalLanguage;
    }
  }

我尝试通过 set 函数从一个组件进行设置，通过 get 函数从另一个组件读取变量是 undefined。我搜索了几个示例，但它们仅涉及全局常量，而不是我可以更改或更新的全局变量。我该如何解决这个问题？

编辑

我也这样试过，结果一样，变量未定义

这是全局 var 可注入服务：

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

@Injectable({
  providedIn: 'root',
})

export class SharedService {
    private globalLanguage:string;

    setGlobalVar(currentLanguage:string) {
      this.globalLanguage = currentLanguage;
    }

    getGlobalVar():string{

        return this.globalLanguage;
    }
  }

这是我从组件 1 开始设置的方式：

import { SharedService } from '../../../shared/vars'

@Component({

  providers: [SharedService],
  selector: 'app-user-menu',
  templateUrl: './user-menu.component.html',
  styleUrls: ['./user-menu.component.scss']
})
export class UserMenuComponent implements OnInit {

  constructor(public translate: TranslateService , public ls: SharedService) {
     (...)
  }

  ngOnInit() {
  }

  languageSwitcher(currentLanguage: string){

    // This is the set point!
    this.ls.setGlobalVar(currentLanguage);
  }
}

这就是我从组件 2 中读取的方式，结果 "undefined":

    import { Component, OnInit } from '@angular/core';
    import { TranslateService } from '@ngx-translate/core';
    import { SharedService } from '../../shared/vars'

    @Component({

      providers: [SharedService],
      selector: 'app-administration',
      templateUrl: './administration-main.component.html',
      styleUrls: ['./administration-main.component.scss']
    })
    export class AdministrationMainComponent implements OnInit {

      constructor(public translate: TranslateService, public ls: SharedService) {
     //This is the output point!        
     console.log('test' + ls.getGlobalVar());
      }

      ngOnInit() {
      }
    }

Answer 1

您需要使此 class 成为带有 @Injectable 装饰器的服务，并在您的应用程序的根目录中提供。之后，在每个要使用它的组件中，您需要在构造函数中实例化它。

constructor(public sharedService: SharedService) ()

然后你就可以访问你的函数了。

Answer 2

为您的服务使用@Injectable

在您的 class 中导入该服务并注入您的构造函数。如果你想在 class 的负载上加载变量或调用函数，请在构造函数内部或外部调用它

    constructor(private sharedService: SharedService) {
        this.name= sharedService.name;
    }

Answer 3

从 providers 数组中删除 SharedService。它正在创建 SharedService

的多个实例

在 Angular 应用程序中获取和设置全局变量

Global variables get and set in an Angular app

internationalization

angular-i18n

ngx-translate

angular

编辑