Используйте действия ngxs для запуска ngx-translate - PullRequest
Новая
       52

Используйте действия ngxs для запуска ngx-translate

0 голосов
/ 12 октября 2019

Я пытаюсь изменить язык своего приложения с помощью действий ngxs. Действия используют 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(SetLanguageAction)
  setLanguage(
    ctx: StateContext<LanguageStateModel>,
    action: SetLanguageAction
  ) {
    // This modifies your state
    ctx.patchState({
      active: action.lang
    });
    this.translate.use(action.lang);
  }

Я ожидаю измененияязык нажатия кнопки такой же, как он работает без использования действий.

1 Ответ

1 голос
/ 22 октября 2019

Поскольку мой комментарий помог вам, я оставлю это как ответ. Это может быть полезно для кого-то еще ?

Обработчики действий вызываются за пределы угловой зоны. Это разработано и контролируется с помощью «стратегии исполнения». По умолчанию NGXS использует DispatchOutsideZoneNgxsExecutionStrategy. Он выполняет ваш код вне зоны Angular через браузер runOutsideAngular.

Все, что вам нужно сделать, это вызвать метод translate.use внутри зоны Angular: 

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

Не забудьте ввести класс NgZone.

...