Question

我有一项提供全球应用语言的服务如下：

export class LanguageService {
  private currentLanguage$ = new ReplaySubject < string > ();

  getCurrentLanguage(): Observable < string > {
    return this.currentLanguage$.asObservable();
  }
}

我使用此服务在整个应用程序中动态提供语言切换。所有组件都遵循上述函数提供的语言（'en'，'fr'等），我希望CurrencyPipe也这样做。

据我了解，我可以通过LOCALE_ID提供此信息，但我无法在文档中找到有关如何执行此操作的示例或指导，尤其是如何使用可观察对象来提供它。

Answer 1

根据Angular的解决方案是使用i18n创建多个构建。当然，出于某种原因，这可能是不可能的。

我的日期管道几乎遇到了同样的问题，唯一不同的是我使用的是局部变量。

首先，我尝试在我的appModule中提供这个：

{
  provide: LOCALE_ID, deps: [WindowRef], useFactory(windowRef: WindowRef) {
    return windowRef.ln;
  }
}

服务：

@Injectable()
export class WindowRef {
  get nativeWindow(): any {
    return _window();
  }

  public ln = 'en';


  constructor() {
    try {
      if (!isNullOrUndefined(this.nativeWindow.navigator.language) && this.nativeWindow.navigator.language !== '') {
        this.ln = this.nativeWindow.navigator.language;
      }
    }finally {}
  }
}

但是在使用AOT时这对我没用。我的解决方案是创建我自己的日期管，它扩展了角度日期管。

这是结果：

@Pipe({name: 'datepipe', pure: true})
export class MyDatePipe extends DatePipe implements PipeTransform {
  constructor(private win: WindowRef) {
    super(win.ln);
  }

  transform(value: any, pattern?: string): string | null {
    return super.transform(value, pattern);
  }
}

你几乎可以做同样的事情，但随后扩展currencyPipe。

Answer 2

只需将此声明添加到提供者列表中即可。

{
  provide: LOCALE_ID,
  deps: [LanguageService],   
  useFactory: (languageService) => languageService.getLanguage() 
}

另外，您可能需要从getLanguage方法返回Promise，因为它们不支持Observable（据我所知）。

从Observable Service

2 个答案: