css - Mat-autocomplete 宽度不随输入主机上的动态宽度调整

Question

我有一个 mat-form-field，里面有一个标准输入，并附加了一个 mat-autocomplete。

    <mat-form-field appearance="fill">
    <mat-label>{{ 'INVENTORY.areaOfBusiness' | translate }}</mat-label>
    <input type="text" matInput
    [matAutocomplete]="businessAreaAuto"
    (keyup)="search($event, 'businessArea')"
    [(ngModel)]="businessArea">
    <mat-icon matSuffix>add</mat-icon>
    <mat-autocomplete #businessAreaAuto="matAutocomplete" (optionSelected)="businessSelection($event)">
      <mat-option *ngIf="bizNoResults === true" class="no-click">{{ 'INVENTORY.no-result' | translate }}</mat-option>
      <mat-option *ngIf="isSearchBiz === true">
        <div class="desktop-spinner">
          <span>{{ 'INVENTORY.searching' | translate }}...</span>     
          <mat-progress-spinner
            diameter = 20
            mode = "indeterminate"
            [value]="value">
          </mat-progress-spinner>
        </div>
      </mat-option>
      <mat-option 
        *ngFor="let bizArea of businessAreaResults | async"
        [value]="bizArea"
        matTooltip="{{bizArea}}">
        {{bizArea}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

在 mat-form-field 上，我在应用 mat-focused 类时添加了一个过渡宽度:

    mat-form-field {
    margin-left: 24px;
    font-size: 14px;
    width: 170px;
    transition: width .5s ease;
  }
  .mat-focused {
    width: 270px;
  }

但是，当输入进入和离开焦点时，我遇到了自动完成面板宽度大小的问题。在用户输入文本之前，自动完成面板似乎并没有真正 catch 适当的宽度。我还没有在 Angular Material 文档中找到一种方法或输入，它有一个很好的方法来使用正确的大小更新自动完成。它似乎在转换过程的不同点捕获了输入的大小。

任何帮助/建议将不胜感激

堆栈 Blitz https://stackblitz.com/edit/angular-yfxr8y

Answer 1

这个场景中有两个事件，一个是打开 mat-autocomplete 的事件，另一个是您第一次击键搜索时触发的事件。

第一个通过 _attachOverlay() 创建叠加层，因为 if (!overlayRef) 等于 true https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L594 '

第二个触发 _attachOverlay() 的 else 条件，因为覆盖层已经存在。

// Update the trigger, panel width and direction, in case anything has changed.

https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L601

为每个事件调用 _attachOverlay()。

 /** Opens the autocomplete suggestion panel. */
  openPanel(): void {
    this._attachOverlay();
    this._floatLabel();
  }

两者都不是连续的更新“流”，两种情况都被设计为单一事件。

---

您可以在 mat-autocomplete 上利用 panelWidth 输入并指定宽度为 270px

<mat-autocomplete #auto="matAutocomplete" panelWidth="270px">

这不会使宽度随您的过渡自动调整大小，但是，如果您希望为其设置动画，您将需要探索覆盖 mat-autocomplete 或编写您自己的解决方案。