Question

我们在解决方案中遇到了ngx-translate / translateService的一些延迟问题。将它与某些API一起使用以返回失败或成功的消息有时需要很长时间才能显示消息。例如，在下面的示例中，在显示消息之前需要一些时间，给定用户感觉，根本不创建PIN。有没有办法改善这种反应？

的src /资产/ I18N / pt.yaml

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

的src /资产/ I18N / en.yaml

transaction:
createdCodeMsg: "New PIN sucessfully created: "

的src /应用程序/工具/ createPIN /创建-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

Angular CLI：1.7.4节点：8.4.0 OS：win32 x64 Angular：5.2.4 ......   动画，cdk，common，编译器，编译器-cli，core，forms ... 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 typescript：2.4.2 webpack：3.11.0

Answer 1

我意识到问题是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;
        })
    );

ngx-translate：消息显示时间太长

1 个答案: