在main.ts和app.module中使用相同的服务实例化（到处都是单个）

Question

我在'root'中提供了一个名为“ LocaleService”的服务，其中包含我的所有语言环境逻辑。

该服务启动应用程序的本地化，并提供一些有关语言环境的功能。

我必须在main.ts中初始化此服务以使角度语言环境起作用

这是我的初始化：

var injector = ReflectiveInjector.resolveAndCreate([LocaleService]);
var localeService : LocaleService = injector.get(LocaleService)


platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: TRANSLATIONS, useValue: localeService.translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
    { provide: LOCALE_ID, useValue: localeService.locale },
  ]
})
  .catch(err => console.log(err));

问题是，在我的组件中使用第二次实例化服务时，如下所示：

  constructor(private localeService : LocaleService, private userEndpoint: UserEndpoint) { }

  ngOnInit() {

    alert(this.localeService.locale);

    this.user = new User();

     this.userEndpoint.getCurrentUser().subscribe(u =>{
       this.user = u;
     })


  }

我希望我的引导程序提供程序可以在任何地方都承载相同的实例，但事实并非如此。

有没有办法在我的所有应用程序中携带我在main.ts中创建的同一实例？

这是我的服务：

import { Injectable } from '@angular/core';
import { loadMessages, locale } from 'devextreme/localization';
import { registerLocaleData } from '@angular/common';
import localeFRCA from '@angular/common/locales/fr-CA';
import config from "devextreme/core/config";
import "devextreme-intl";

declare const require;

@Injectable({providedIn:'root'})
export class LocaleService {

  translations : string;
  locale : string;

  constructor(){

    //Default currency CAD
    config({defaultCurrency:"CAD"});
    //register angular locale frCA
    registerLocaleData(localeFRCA);

    let dxMessageFR = require("devextreme/localization/messages/fr.json");
    loadMessages(dxMessageFR);

    this.locale = localStorage.getItem('locale');
    if (!this.locale) {

      if (navigator.language.toUpperCase().indexOf("FR") !== -1)
      this.locale = "fr-CA";
      else
      this.locale = "en-CA";

      localStorage.setItem('locale', this.locale);

    }
    //set devextreme intl language for dev extreme widget;
    locale(this.locale);

    this.translations = require(`raw-loader!../../locale/messages.${this.locale}.xlf`);
  }


}

Answer 1

问题是

@Injectable({providedIn:'root'})
export class LocaleService {
...

providedIn: 'root'告诉Angular为整个应用程序提供该服务。
这是Angular 6中的一项新功能，需要一点时间来熟悉。 :-)

您将在模块中第二次提供服务。

platformBrowserDynamic().bootstrapModule(AppModule, {
    providers: [
    { provide: LocaleService, useValue: localeService},
    { provide: TRANSLATIONS, useValue: localeService.translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
    { provide: LOCALE_ID, useValue: localeService.locale },
  ]
})

仅使用两个版本中的一个，而happines将是您的。 :-)

温暖的问候

Answer 2

我最终使用了全局静态类而不是注入。 我唯一要做的就是在main.ts中这样调用我的init方法：

LocaleService.init();

现在，我也可以将服务导入任何需要的地方：

import { LocaleService } from './app/services/locale.service';

这是我的课：

export class LocaleService {

  static translations : string;
  static locale : string;

 static init(){

   //Default currency CAD
   config({defaultCurrency:"CAD"});
   //register angular locale frCA
   registerLocaleData(localeFRCA);

   let dxMessageFR = require("devextreme/localization/messages/fr.json");
   loadMessages(dxMessageFR);

   this.locale = localStorage.getItem('locale');
   if (!this.locale) {

     if (navigator.language.toUpperCase().indexOf("FR") !== -1)
     this.locale = "fr-CA";
     else
     this.locale = "en-CA";

     localStorage.setItem('locale', this.locale);

   }
   //set devextreme intl language for dev extreme widget;
   locale(this.locale);

   this.translations = require(`raw-loader!../../locale/messages.${this.locale}.xlf`);

 }

};