滚动时，mat-autocomplete 选项下拉菜单不会粘住答案

【问题标题】：mat-autocomplete options dropdown does not stick when scrolling滚动时，mat-autocomplete 选项下拉菜单不会粘住
【发布时间】：2020-02-25 15:54:08
【问题描述】：

在我的 Angular 应用程序中，我使用的是autocomplete feature from Angular Material：

它工作正常，除非我滚动页面：

基本上，下拉菜单在滚动时不会停留在其位置，我不知道为什么。

在官方 Material 文档页面中，它通过自动更新元素的 top 和 left 属性来运行良好。但是，这不会发生在我的应用中。

【问题讨论】：

标签： angular angular-material angular-cdk

【解决方案1】：

经过一番研究，我找到了omaracrystal 在github 上发布的解决方案。

我需要做的是：

1) 导入Angular CDK的ScrollingModule

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    // ...
    ScrollingModule,
  ],
  // ...
})
export class MyAppModule { }

2) 找到包含我的自动完成输入的最外层 div 并应用 cdkScrollable 指令：

<div cdkScrollable>
  <!-- the autocomplete is located somewhere here, not necessarily as direct child -->
</div>

【讨论】：

你需要 cdkScrollable 在有滚动的元素上。

【解决方案2】：

首先，我们需要能够使用 autoComplete 方法，因此我们必须从视图中获取此控件。添加id：#autoCompleteInput

     <input
        #autoCompleteInput
        type="text"
        class="form-control"
        matInput
        [matAutocomplete]="auto"
        formControlName="country"
        (input)="filterCountries($event.target.value)"
      />

在组件中：

@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger })
  autoComplete: MatAutocompleteTrigger;

现在我们将 autoComplete 作为变量。接下来我们需要一个滚动事件：

ngOnInit(): void {
    window.addEventListener('scroll', this.scrollEvent, true);
}

最后给组件添加一个函数：

scrollEvent = (event: any): void => {
    if(this.autoComplete.panelOpen)
      // this.autoComplete.closePanel();
      this.autoComplete.updatePosition();
};

参考：Origin

【讨论】：

【解决方案3】：

以下解决方案对我有用。希望这对某人有所帮助。

我添加了 AutocompletePositionModule 模块。然后添加指令并在我的项目中的许多地方使用。

模块文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AutocompletePositionDirective } from './autocomplete-position.directive';
import { MatAutocompleteModule } from '@angular/material/autocomplete';

    @NgModule({
      declarations: [
        AutocompletePositionDirective
      ],
      exports: [
        AutocompletePositionDirective
      ],
      imports: [
        CommonModule,
        MatAutocompleteModule,
    
      ]
    })
    export class AutocompletePositionModule { }

指令文件

import { Directive, Input, OnDestroy } from '@angular/core';
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';

@Directive({
  selector: '[appAutocompletePosition]',
  exportAs : 'appAutocompletePosition'
})
export class AutocompletePositionDirective implements OnDestroy {
  public constructor(
    private readonly matAutocompleteTrigger: MatAutocompleteTrigger,
  ) {
    window.addEventListener('scroll', this.scrollEvent, true);
  }

  public ngOnDestroy(): void {
    window.removeEventListener('scroll', this.scrollEvent, true);
  }

  private scrollEvent = (): void => {
    if (this.matAutocompleteTrigger == null) {
      return;
    }
    if (this.matAutocompleteTrigger.panelOpen) {
      this.matAutocompleteTrigger.updatePosition();
    }
  }
}

用法

<input type="text" matInput [matAutocomplete]="auto" #trigger="matAutocompleteTrigger" appAutocompletePosition="trigger" />

【讨论】：

【解决方案4】：

我的 mat-autocomplete 位于 mat-dialog，导入 ScrollingModule 并将 cdkScrollable 添加到我的 div , 似乎没有帮助，所以我设法在滚动时隐藏了列表，因为滚动选项列表时并不重要。

我用过：

removeAutocompleteFocus() {
    let element = this.document.querySelector('.mat-autocomplete-panel');
    if (element) {
    element.parentNode.removeChild(element);
    }
  }

<div (scroll)="removeAutocompleteFocus()"></div>

【讨论】：