Question

TL; DR
当其deps服务具有新值时，如何即时更改提供者？

长篇故事
我正在尝试实施自己的i18n解决方案。我只想使用TS文件而不是JSON进行翻译。这是我的主意：

我的app.translations.ts文件夹中有app：

export interface AppTranslations {
  hello: string;
}

我还有两个资产-assets/translations/en.ts：

export const translations: AppTranslations = {
  hello: 'Hello'
}

还有assets/translations/es.ts：

export const translations: AppTranslations = {
  hello: 'Hola'
}

仅用于动态加载此文件。
为此，我创建了LanguageService：

@Injectable({providedIn: 'root'})
export const LanguageService {

  lang$ = new BehaviorSubject('en');

}

现在，我想做以下技巧（我使用import是因为我希望我的翻译被延迟加载）：

@NgModule({
  ...
  providers: [
    {
      provide: 'appTranslations',
      useFactory: async (language: LanguageService) => await import('../assets/translations/' + language.lang$.getValue()),
      deps: [LanguageService]
    }
  ]
  ...
})
export class AppModule {
}

现在我想将其注入我的AppComponent：

@Component(...)
export class AppComponent implements OnInit {

  appTranslations: AppTranslations;

  constructor(@Inject('appTranslations') private appTranslations$: Promise<AppTranslations>,
              public language: LanguageService) {
  }

  async ngOnInit() {
    this.appTranslations = (await this.appTranslations$)['translations'];
  }

}

并在HTML中使用它：

<div *ngIf="appTranslations">
  {{appTranslations.hello}}
</div>

它确实有效！
但是现在我想将语言更改为西班牙语。我添加了以下按钮：

<button (click)="language.lang$.next('en')">EN</button>
<button (click)="language.lang$.next('es')">ES</button>

这里出现一个问题...单击ES按钮后，useFactory的方法无法“重新调用”。换句话说，什么也没发生。

我应该怎么做才能将语言更改为西班牙语？我在正确的轨道上吗？这种解决办法有可能吗？

我很高兴听到我如何改善自己的实施。预先感谢！

Angular：随时更改提供者

0 个答案: