我最近升级到了Angular v21以及Google Places Autocomplete新控件。

在输入地址时，选项被隐藏，它们触发了mat对话框内容的溢出，而不是悬浮在上方。

我试着改了z-index，但没有任何效果。正如你所见，它确实在那里，只是不可见或没有被覆盖。

解决方案

问题很可能是由于 mat-dialog-content 在Angular Material中默认应用了 overflow: hidden 或 overflow-y: auto，导致自动完成下拉被裁剪，无法浮在对话框之上。我认为仅仅更改z-index不会解决这个问题，因为元素可能被祖先裁切，这也是需要先解决overflow的原因。

基于此，你可以在打开对话框时传递一个 panelClass，并在全局样式表中覆盖overflow：

打开对话框：

this.dialog.open(YourDialogComponent, {
  panelClass: 'dialog-overflow-visible'
});

在全局 styles.scss：

.dialog-overflow-visible {
  .mat-mdc-dialog-content {
    overflow: visible !important;
  }

  .mat-mdc-dialog-surface {
    overflow: visible !important;
  }
}

备选方案

我知道这是一种不太优雅的修复，但这是我最近将一个从v14更新到v21的 Angular应用中的下拉菜单显示出来的唯一办法。将pac-container从 移动到对话框

async initAutoComplete() {
    await google.maps.importLibrary('places');
    const autocomplete = new google.maps.places.Autocomplete(this.addressRef.nativeElement);
    setTimeout(() => {
      const pacContainer = document.querySelector('.pac-container');
      const dialog = document.querySelector('.mat-mdc-dialog-surface');
      if (pacContainer && dialog) {
        dialog.appendChild(pacContainer);
      }
    }, 300);

    autocomplete.addListener('place_changed', () => {
      this.handleAddressChange(autocomplete.getPlace());
    });
  }

::ng-deep .pac-container {
  position: fixed !important;
}