时间戳

首页 > 解决方案 > Angular Material 概述了输入和 ngx-translate

angular - Angular Material 概述了输入和 ngx-translate

问题描述

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

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

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

当我更改语言时，有没有办法只刷新/重建输入，而不必刷新页面？

谢谢！

法文标签正常：

法文标签正常

标签用英文轮廓截断：

标签用英文轮廓截断

标签： angularngx-translateangular-material-6

解决方案

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 。

推荐阅读