Используйте один и тот же экземпляр службы из main.ts и app.module (синглтон везде) - PullRequest
Новая
       45

Используйте один и тот же экземпляр службы из main.ts и app.module (синглтон везде)

0 голосов
/ 12 ноября 2018

У меня есть служба с именем «LocaleService», предоставленная в «root», которая содержит всю мою логику локали.

Эта служба инициирует локализацию приложения и предоставляет некоторые функции о локалях.

Я должен инициализировать этот сервис в 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`);
  }


}

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

В итоге я использовал глобальный статический класс вместо внедрения.Единственное, что мне нужно сделать, это вызвать мой метод init в main.ts следующим образом: 

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`);

 }

};
0 голосов
/ 12 ноября 2018

«проблема» равна 

@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 },
  ]
})

Используйте только одну из обеих версий, и счастье будет вашим. : -)

С уважением

...