Angular Material 概述输入和 ngx-translate

Question

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

在我的应用程序中，我有一些 appearance="outline" 的垫输入。每当我更改应用程序的语言时，输入标签都会被字段轮廓截断，如下面的屏幕截图所示。

如果我刷新页面，大纲会采用当前语言的宽度，并且它会正常工作。

有什么方法可以在我更改语言时 refresh/rebuild 仅输入，而无需刷新页面？

谢谢！

法文标签正常：

标签被英文大纲截断：

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。

Angular Material 概述输入和 ngx-translate

Angular Material outlined input and ngx-translate

ngx-translate

angular

angular-material-6