ngx-translate: сообщения отображаются слишком долго - PullRequest
Новая
       9

ngx-translate: сообщения отображаются слишком долго

0 голосов
/ 17 мая 2018

Мы столкнулись с некоторыми проблемами с задержкой использования ngx-translate / translateService в нашем решении. При использовании его с некоторыми API для возврата неудачных или успешных сообщений иногда требуется слишком много времени, пока сообщение не отобразится. Например, в приведенном ниже примере требуется некоторое время, прежде чем отобразится сообщение, учитывая, что пользователь чувствует, что PIN-код вообще не был создан. Есть ли способ улучшить этот ответ?

ЦСИ / активы / i18n / pt.yaml 

transaction:
createdCodeMsg: "Novo código gerado com sucesso:"

ЦСИ / активы / i18n / en.yaml 

transaction:
createdCodeMsg: "New PIN sucessfully created: "

SRC / приложение / инструменты / createPIN / Create-pin.component.ts 

import { TranslateService } from '@ngx-translate/core';
...
    constructor(
        private translateService: TranslateService,
        private myServices: MyServices,
        ) {
        // get messages not part of a template
        this.subscription.push(
            this.translateService.stream([
                  'transaction.createdCodeMsg',
            ]).subscribe(values => {
                this.createdCodeMsg = values['transaction.createdCodeMsg'];
            })
        );
    }
...
    this.subscription.push(
        this.myServices.createPIN(this.createData).subscribe(data => {
            this.createDataResult = data;
            const myPin = this.createDataResult.pin;
            this.createdCodeMsg = this.createdCodeMsg + ' ' + myPin;
            this.msgs.push( { severity: 'success', summary: this.createdCodeMsg } );
        })
    );

Текущая версия:

$ npm -v 5.8.0

Угловой CLI: 1.7.4 Узел: 8.4.0 ОС: win32 x64 Угловой: 5.2.4 ... анимации, cdk, общие, компилятор, compiler-cli, core, формы ... http, платформа-браузер, платформа-браузер-динамическая, маршрутизатор

@ angular / cli: 1.7.4 @ angular / flex-layout: 5.0.0-beta.14 @ angular-devkit / build-optimizer: 0.3.2 @ angular-devkit / core: 0.3.2 @ angular-devkit / schematics: 0.3.2 @ ngtools / json-schema: 1.2.0 @ ngtools / webpack: 1.10.2 @ schematics / angular: 0.3.2 @ schematics / package-update: 0.3.2 машинопись: 2.4.2 веб-пакет: 3.11.0

1 Ответ

0 голосов
/ 18 мая 2018

Я понял, что проблема в том, что angular сначала отображает HTML. Поэтому я решил это с помощью простой переменной рендеринга, которая не будет включена, пока сообщение не готово. В то же время должен отображаться значок загрузки с учетом обратной связи с пользователем, работа еще продолжается.

HTML: 

<ng-container *ngIf="renderHTML; else elseTemplate">
   <myTemplate></myTemplate>
</ng-container>
<ng-template #elseTemplate>
  <div class="ui-table-loading ui-widget-overlay"></div>
  <div class="ui-table-loading-content">
    <i [class]="'fa fa-spin fa-2x ' + loadingIcon"></i>
  </div>
</ng-template>

component.ts: 

...
renderHTML = false;
constructor(
        private translateService: TranslateService,
...
this.subscription.push(
        this.myServices.createPIN(this.createData).subscribe(data => {
            this.createDataResult = data;
            const myPin = this.createDataResult.pin;
            this.createdCodeMsg = this.createdCodeMsg + ' ' + myPin;
            this.msgs.push( { severity: 'success', summary: this.createdCodeMsg } );
            this.renderHTML = true;
        })
    );
...