nz-select 下拉列表不会在 nz-modal 中自行连接

Question

在内容可滚动的 nz-modal 中使用 nz-select 时，您会看到页面滚动后下拉列表未连接到自身。

这是重现问题的示例StackBiltz。

Answer 1

我用指令解决了这个问题

import { ChangeDetectorRef, Directive, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { NzSelectComponent } from 'ng-zorro-antd/select';

@Directive({
  selector: '[aysrCloseSelectOnScroll]'
})
export class CloseSelectOnScrollDirective implements OnInit, OnDestroy {
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  listenerFn = () => {};
  constructor(
    private el: NzSelectComponent,
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document,
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    const antModalWrap: HTMLCollectionOf<Element> = this.document.body.getElementsByClassName('ant-modal-wrap');

    this.listenerFn = this.renderer.listen(antModalWrap.item(0), 'scroll', (event) => {
      this.el.nzOpen = false;
      this.changeDetectorRef.detectChanges();
    });
  }

  ngOnDestroy(): void {
    this.listenerFn();
  }
}

你可以使用它

 <nz-select aysrCloseSelectOnScroll formControlName="documentation">
              <nz-option [nzValue]="item.id" [nzLabel]="item.label" *ngFor="let item of documentation"></nz-option>
            </nz-select>
          </nz-form-control>