Angular Material 概述了输入和 ngx-translate

Question

我有一个带有 Angular Material ^6.0.2 和 ngx-translate ^10.0.2 的 Angular 应用程序 ^6.0.0。

在我的应用程序中，我有一些外观为“outline”的垫子输入。每当我更改应用程序的语言时，输入标签都会与字段轮廓一起截断，如下面的屏幕截图所示。

如果我刷新页面，大纲将采用当前语言的宽度，并且按原样工作。

有没有什么方法可以在我更改语言时只刷新/重建输入，而无需刷新页面？

谢谢！

法文标签法线：

标签用英文轮廓截断：

Answer 1

MatFormField 为此提供了一个函数 - updateOutlineGap()。您可以在使用超时更改语言后调用该函数：

模板：

<mat-form-field appearance="outline" #formField="matFormField">
    <mat-label>{{ 'search' | translate }}</mat-label>
    <input matInput placeholder="Favorite food">
</mat-form-field>

组件：

@ViewChild('formField') formField: MatFormField;

changeToFr() {
    this.translate.use('fr');
    setTimeout(() => this.formField.updateOutlineGap());
}

这是您在 Stackblitz 上更新的示例：https://stackblitz.com/edit/angular-material2-translate-issue-1uamsu。