Как перерисовать или обновить sh html секцию в angular, когда asyn c pipe обновляется? - PullRequest
Новая
       64

Как перерисовать или обновить sh html секцию в angular, когда asyn c pipe обновляется?

0 голосов
/ 23 января 2020

У меня есть асинхронный c канал, он соединен с провайдером, чтобы сделать запрос на перевод для aws перевода, а затем возвращает обещание. У меня есть страница "about", на этой странице показана возможность выбора языка между Engli sh и Spani sh. Я сохраняю значение в хранилище, а затем отправляю sh на событие, чтобы сообщить поставщику перевода. чтобы обновить переменную "language", таким образом, в асинхронном канале c, если язык для испанского языка "es" sh, он сделает запрос на перевод aws, иначе вернет значение по умолчанию;

Проблема в том, как я могу отрисовать в этом случае страницу "about", когда язык изменился, поскольку это не изменение значения компонента, как я могу отрендерить только страницу, чтобы канал мог перевести "about" html text?

Труба работает отлично, просто не знаю, как ее перезагрузить, когда пользователь меняет язык в тот момент.

о разделе страницы, который мне нужно перевести 

        <ion-row>
          <ion-item>
              <strong>{{'Account:' | translate | async}}</strong> {{account.displayName}} <br>
              <strong>{{'User:' | translate | async}}</strong> {{user.first_name}} {{user.last_name}} <br>
              <strong>{{'Email:' | translate | async}}</strong> {{user.email}} <br>
              <strong>{{'App Version:' | translate | async}}</strong> {{version}} <br>
          </ion-item>
          <ion-item>
            <ion-label><strong>{{'Language' | translate | async}}</strong></ion-label>
            <ion-select [(ngModel)]="language" (ngModelChange)="selectLanguage($event)">
              <ion-option value="en">English / Inglés</ion-option>
              <ion-option value="es">Spanish / Español</ion-option>
            </ion-select>
          </ion-item>
        </ion-row>

Метод SelectLanguage 

  selectLanguage(lan){
    this.storage.set('lan', lan).then(lan => {
      this.events.publish('lan:changed', lan);
    });
    console.log("selectLanguage(): "+lan);
  }

Я думал и пробовал NgZone, но что я буду запускать в обратном вызове?

РЕДАКТИРОВАТЬ:

translate.pipe.ts 

@Pipe({
  name: 'translate'
})
export class TranslatePipe implements PipeTransform {
  public language: any;
  constructor(public translate: TranslateProvider, public events: Events){
    this.translate.getLanguageOption();
  }
  async transform(value: string, ...args) {
    const params = {
      Text: value,
      SourceLanguageCode: "en",
      TargetLanguageCode: "es"
    };
      if(this.translate.language === "es"){
          let actionPromise = this.translate.translator.translateText(params).promise();
          return actionPromise.then((data) => {
            console.log()
            return (data.TranslatedText);
          }).catch((err) => {
            console.log(err);
          });
      } else {
        return value;
      }
    }

}

1 Ответ

0 голосов
/ 23 января 2020

Я думаю, вам нужна нечистая труба для этого. 

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})
...