angular - 发生 chrome 自动填充时，Mat-form-field-outline-gap 大小不正确

Question

当我们的应用程序最初加载并且由于使用谷歌浏览器保存登录信息而自动填充表单mat-form-field-outline-gap时，正在使用使用密码自动填充时使用的默认字体进行计算。当字体切换到我们的字体时，间隙不再正确（太短，因为我们的字体比默认字体宽）。

如果字段不自动填充一切正常。

表单元素：

<mat-form-field appearance="outline" class="login-form">
  <mat-label>Email Address</mat-label>
  <input matInput
         formControlName="emailAddress">
</mat-form-field>

styles.scss包括：

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700&display=swap');
.login-form {
  font-family: 'Montserrat';
}

它显然与调用间隙的方法何时运行有关，但我不知道如何解决这个问题。我已经尝试了以下猴子补丁，但它仅在初始加载时修复问题并在其他情况下破坏问题！

export function patchMatFormField() {
  const patchedFormFieldClass = MatFormField.prototype as any;
  patchedFormFieldClass.updateOutlineGapOriginal = MatFormField.prototype.updateOutlineGap;

  MatFormField.prototype.updateOutlineGap = function() {
    this.updateOutlineGapOriginal();
    const container = this._connectionContainerRef.nativeElement;
    const gapEls = container.querySelectorAll('.luma-input .mat-form-field-outline-gap');
    gapEls.forEach((gp) => {
      const calculatedGapWidth = +gp.style.width.replace('px', '');
      const gapWidth = calculatedGapWidth / 0.85;
      gp.style.width = `${gapWidth}px`;
    });
  };
}

更新 我可以通过重新运行来让它工作，updateOutlineGap()如这篇文章所示，但我只能通过将超时设置为来让它工作~500ms（当被限制时它似乎不起作用......）。我想知道是否有办法判断何时加载/应用字体？

标签： angulargoogle-chromeangular-materialautofill