ngx-translate：消息显示时间过长答案

【问题标题】：ngx-translate: messages take too long to be displayedngx-translate：消息显示时间过长
【发布时间】：2018-10-27 20:56:53
【问题描述】：

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

src/assets/i18n/pt.yaml

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

src/assets/i18n/en.yaml

transaction:
createdCodeMsg: "New PIN sucessfully created: "

src/app/tools/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

Angular CLI：1.7.4 节点：8.4.0 操作系统：win32 x64 Angular：5.2.4 ... 动画, cdk, common, compiler, compiler-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 @schemics/angular：0.3.2 @schemics/package-update: 0.3.2 typescript: 2.4.2 webpack: 3.11.0

【问题讨论】：

标签： angular ngx-translate

【解决方案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;
        })
    );

【讨论】：