角材料轮廓输入和ngx-translate

Question

我有一个Angular应用^ 6.0.0和Angular Material ^ 6.0.2，并且ngx-translate ^ 10.0.2。

在我的应用中，我有一些matt输入，外观为“ 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。