时间戳

首页 > 解决方案 > 更新异步管道时如何以角度重新渲染或刷新html部分？

angular - 更新异步管道时如何以角度重新渲染或刷新html部分？

问题描述

我有一个异步管道，它与提供者连接以向 aws translate 发出翻译请求，然后返回一个承诺。我有一个“关于”页面，在此页面中显示了在英语和西班牙语之间选择语言的选项我将值存储在存储中，然后我将其推送到一个事件以告诉翻译提供者更新“语言”变量，这样在异步管道中，如果语言是西班牙语的“es”，它将向 aws translate 发出请求，否则它将返回默认值；

问题是在这种情况下，当语言更改时，如何重新呈现“关于”页面，因为它不是组件值更改，我如何仅重新呈现页面，以便管道可以翻译“关于”html 文本？

管道完美运行，只是不知道当用户在那一刻更改语言时如何重新加载它。

关于我需要翻译的页面部分

        <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(lan){
    this.storage.set('lan', lan).then(lan => {
      this.events.publish('lan:changed', lan);
    });
    console.log("selectLanguage(): "+lan);
  }

我想并尝试了 NgZone 但我将在回调中运行什么？

编辑：

翻译.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;
      }
    }

}

标签： angulartypescriptionic-frameworkasync-pipe

解决方案

我认为你需要一个不纯的管道。

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

推荐阅读