如何在页面初始化时翻译ngif隐藏的文本？

Question

我正在设置 i18n 翻译来为我的 Web 应用程序实现多种语言。在我的 Web 应用程序中，我使用 Angular Material Steppers，其中的步骤会隐藏，直到某些操作完成为止。这些步骤通过

ngIf

指令隐藏。起初，我将文本硬编码在 HTML 文件中，然后工作正常，但现在当我通过将

ngIf

设置为 true 来显示步骤时，隐藏步骤的文本不会显示。

但是，当我在页面初始化时不使用

ngIf

隐藏步骤时，文本确实会显示。 我也尝试使用

[hidden]

代替

ngIf

但 mat-step 不支持

[hidden]

。

实现 i18n 翻译之前的 html（工作）

<mat-step [editable]="!done" *ngIf="companySelected" >
    <ng-template matStepLabel>contactinformation</ng-template>
</mat-step>

实现后的html

<mat-step [editable]="!done" *ngIf="companySelected" >
    <ng-template matStepLabel>{{ 'CONTACTGEGEVENS' | translate }}</ng-template>
</mat-step>

ts

companySelected = false;
onSelect(company: any) {

    this.company = company;
    this.newCompany = false;
    this.companySelected = true;
   this.nextTab();
  }

有什么想法如何继续使用 i18n 翻译和

ngIf

指令吗？

Answer 1

问题出在我的 ngx 翻译版本上，因为我使用的是 Angular 5。 我使用的版本适用于 Angular 6 及更高版本。 我做了 npm i @ngx-translate/[email protected] 来转到正确的版本并且它有效。 不知道为什么除了 ngif 之外它在其他地方都可以工作。

Answer 2

在我的例子中，这是错误的控制值，而不是“confirmUserPassword”是“confirmUserPasswordHit”。这就是翻译错误的原因。

`<div class="alert alert-danger mt-1"
*ngIf="registerForm.controls['confirmUserPassword'].invalid &&
registerForm.controls['confirmUserPassword'].touched" translate>
registration.passwordValidation
</div>`