Угловой материал, обрисованный в общих чертах, ввод и ngx-translate

У меня есть приложение Angular ^ 6.0.0 с Angular Material ^ 6.0.2 и ngx-translate ^ 10.0.2.

В моем приложении есть несколько входов-матов с внешним видом = "контур". Всякий раз, когда я меняю язык приложения, метка ввода усекается с контуром поля, как на скриншоте ниже.

Если я обновляю страницу, контур принимает ширину текущего языка и работает так, как должен.

Есть ли способ обновить / перестроить только входные данные, когда я меняю язык, без необходимости обновлять страницу?

Спасибо!

Ярлык нормальный на французском:

Обычный ярлык на французском

Ярлык обрезается с контуром на английском языке:

Ярлык обрезается с контуром на английском языке


angular ngx-translate angular-material-6
person Rodrigo Degani    schedule 13.08.2018    source источник
comment
Пожалуйста, попробуйте предоставить соответствующий образец кода, чтобы люди могли вам лучше помочь   -  person Omar Gonzalez    schedule 14.08.2018
comment
Привет, Омар, спасибо за ответ. Я добавил пример проблемы stackblitz: Stackblitz Приложение запускается в английский. Если вы нажмете кнопку FR в правом верхнем углу, а затем выберете вход, вы сможете увидеть проблему с меткой.   -  person Rodrigo Degani    schedule 14.08.2018

Ответы (1)


arrow_upward
2
arrow_downward

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.

person G. Tranter    schedule 14.08.2018
comment
Почему setTimeout, @ g-tranter? Действительно, без него не работает. - person Hossam El-Deen; 03.11.2018
comment
Функция перевода является асинхронной, поэтому изменение метки не применяется немедленно, и поэтому необходимо подождать, прежде чем пытаться использовать метку для расчета размера зазора в контуре. - person G. Tranter; 05.11.2018
comment
Спасибо за ваш ответ. Я пробовал что-то синхронизировать, и setTimeout, похоже, тоже нужен. Есть идеи, почему? пример Slackblitz. Как вы думаете, мне следует открыть вопрос? - person Hossam El-Deen; 06.11.2018
comment
Иногда, когда вы вызываете функцию синхронно, получаемые в результате изменения являются асинхронными. Это часто имеет место в Angular при изменении чего-то, что влияет на отображение. - person G. Tranter; 06.11.2018
comment
Спасибо, но меня, честно говоря, не убедили :). Даже если изменение асинхронное, схема должна исправиться через некоторое время, иначе я вас не понимаю. Будущим читателям: наверное, стоит задать еще один вопрос. Если да, пожалуйста, дайте ссылку здесь. - person Hossam El-Deen; 07.11.2018
comment
Почему разрыв в контурах «устраняется сам собой»? Вы делаете неверное предположение о том, как и когда рассчитывается размер зазора в контуре. Расчет выполняется синхронно при вызове функции обновления. Если изменение метки происходит асинхронно, расчет может произойти до фактического изменения метки, поэтому размер основан на старой метке. Обнаружение изменений не обновляет размер разрыва, за исключением случаев, когда модель DOM нестабильна (возможно, сразу после инициализации или при изменении внешнего вида). Посмотрите на исходный код поля формы, и вы убедитесь в этом. Доказательство в пудинге. - person G. Tranter; 07.11.2018
comment
Большое спасибо за объяснение, теперь я понял! - person Hossam El-Deen; 07.11.2018
comment
Если у меня более одного поля mat-form, я не работаю с остальным mat-form-field. работать только с первым полем мат-формы - person Duc Nguyen; 19.12.2018
comment
@DucNguyen использует ViewChildren вместо ViewChild: angular.io/api/core/ViewChildren - person G. Tranter; 07.01.2019
comment
@ G.Tranter не пересчитывается, когда поле заполняется каким-либо значением. В вашем примере stackblitz Попробуйте ввести любой текст в поле и затем нажмите FR. - person Mois; 30.11.2020
comment
@Mois у меня отлично работает. - person G. Tranter; 01.12.2020