使用 ngxs 动作触发 ngx-translate答案

【问题标题】：Use ngxs actions to trigger ngx-translate使用 ngxs 动作触发 ngx-translate
【发布时间】：2020-02-09 16:07:28
【问题描述】：

我正在尝试通过使用 ngxs 操作来更改我的应用程序的语言。 Actions 使用 TranslationService 来调用类似 this.translate.use(action.lang);

它在应用程序初始化时没有任何问题。意味着我使用 APP_INITIALIZER 来触发从 cookie 值设置语言的操作。工作正常。

同样的动作是由一个按钮触发的。但是你必须在语言之间切换 2 次才能看到效果。

意思是：从 'en' 变成 'de' 没有任何反应从 'de' 变为 'en' 什么都没有从 'en' 变为 'de' 你现在可以看到新语言了

但是所有操作都可以正常工作。您可以直接输出值，一切正常。

有什么建议我可以研究一下。据人们所知，ngx-translate 非常复杂。我只是无法创建一个简单的抽象来在此处显示一些代码进行测试。

正如我提到的，第一次分派一个动作可以正常工作。您还可以在存储的变量中看到正确的值。只有更改不会以正确的方式触发 translate.use(lang)。

我也尝试调用它两次。我在单击按钮时分派了两次操作。而且我还尝试调用 translate.use(lang) 两次。我还尝试将其包装到 setTimeout 中以检查是否存在与异步调用相关的问题。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
  ],
  exports: [
    TranslateModule
  ],
  providers: [TranslateService],
})
export class LanguageModule { }

我的 Action 看起来像这样：

@Action(SetLanguageAction)
  setLanguage(
    ctx: StateContext<LanguageStateModel>,
    action: SetLanguageAction
  ) {
    // This modifies your state
    ctx.patchState({
      active: action.lang
    });
    this.translate.use(action.lang);
  }

我希望在单击按钮时更改语言，就像它在不使用操作的情况下工作一样。

【问题讨论】：

动作处理程序在 Angular 区域之外调用。将translate.use 调用包装成this.ngZone.run(() => this.translate.use(action.lang))。不要忘记将外观类注入您的状态constructor(private ngZone: NgZone) {}
感谢您完全解决了我的问题！

标签： angular internationalization translation ngrx ngxs

【解决方案1】：

由于我的评论对您有所帮助，我将把它作为答案。它可能对其他人有用?

动作处理程序在 Angular 区域之外调用。这是通过设计并通过“执行策略”控制的。默认情况下，NGXS 使用DispatchOutsideZoneNgxsExecutionStrategy。它通过浏览器中的runOutsideAngular 在 Angular 区域之外执行您的代码。

您所要做的就是在 Angular 的区域内调用 translate.use 方法：

this.ngZone.run(() => this.translate.use(action.lang));

别忘了注入 NgZone 类。

【讨论】：