Angular Material Dialog中Google Places Autocomplete位置偏移问题

问题根源 #

Angular Material Dialog在页面滚动后会给document.documentElement添加top偏移样式（如top: -1000px）来阻止页面滚动，而Google Places Autocomplete的.pac-container默认采用fixed定位，会将这个top偏移纳入位置计算，导致下拉框偏离绑定的输入框。

解决方案 #

方案1：将.pac-container挂载到Dialog容器内（推荐）

把Autocomplete的下拉容器从document.body移到Dialog的内容容器中，避免受document的top样式影响：

1. 在Dialog组件中获取内容容器的DOM引用：

import { ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { google } from 'googlemaps';

@Component({
  // 组件配置
})
export class YourDialogComponent implements AfterViewInit {
  @ViewChild('dialogContent') dialogContent!: ElementRef<HTMLElement>;
  private autocomplete?: google.maps.places.Autocomplete;

  ngAfterViewInit(): void {
    const inputEl = document.getElementById('places-input') as HTMLInputElement;
    // 创建专门的容器存放pac-container
    const pacHost = document.createElement('div');
    this.dialogContent.nativeElement.appendChild(pacHost);

    // 初始化Autocomplete
    this.autocomplete = new google.maps.places.Autocomplete(inputEl, {
      types: ['geocode'], // 根据需求配置
    });

    // 把默认挂载在body的pac-container移到Dialog容器内
    const pacContainer = (this.autocomplete as any).placeIdView_.container_;
    pacContainer.parentNode?.removeChild(pacContainer);
    pacHost.appendChild(pacContainer);
  }
}

2. 给Dialog模板添加内容容器的标记：

<div #dialogContent class="dialog-content">
  <input id="places-input" type="text" placeholder="输入地址">
</div>

3. 添加CSS修正定位：

.pac-container {
  position: absolute !important;
  z-index: 10000 !important; /* 确保层级高于Dialog内容 */
  margin-top: 4px; /* 可选：调整与输入框的间距 */
}

方案2：临时移除document的top偏移样式

在Dialog打开时临时清除document.documentElement的top样式，关闭时恢复：

import { Renderer2, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  // 组件配置
})
export class YourDialogComponent implements OnInit {
  private originalTopStyle = '';

  constructor(
    private renderer: Renderer2,
    private dialogRef: MatDialogRef<YourDialogComponent>
  ) {}

  ngOnInit(): void {
    this.dialogRef.afterOpened().subscribe(() => {
      // 保存原top样式
      this.originalTopStyle = this.renderer.getStyle(document.documentElement, 'top') || '';
      // 临时移除top偏移
      this.renderer.setStyle(document.documentElement, 'top', 'auto');

      // 关闭Dialog时恢复原样式
      this.dialogRef.beforeClosed().subscribe(() => {
        this.renderer.setStyle(document.documentElement, 'top', this.originalTopStyle);
      });
    });
  }
}

注意：此方案可能导致Dialog打开瞬间页面有微小滚动，需根据实际场景测试。

方案3：动态修正pac-container位置

监听Autocomplete的预测结果变化事件，手动计算并修正下拉框的位置：

import { AfterViewInit } from '@angular/core';
import { google } from 'googlemaps';

@Component({
  // 组件配置
})
export class YourDialogComponent implements AfterViewInit {
  private autocomplete?: google.maps.places.Autocomplete;

  ngAfterViewInit(): void {
    const inputEl = document.getElementById('places-input') as HTMLInputElement;
    this.autocomplete = new google.maps.places.Autocomplete(inputEl);

    // 监听预测结果更新事件
    this.autocomplete.addListener('predictions_changed', () => {
      setTimeout(() => {
        const pacContainer = document.querySelector('.pac-container') as HTMLElement;
        if (pacContainer && inputEl) {
          const inputRect = inputEl.getBoundingClientRect();
          // 计算输入框底部的绝对位置
          const correctTop = inputRect.bottom + window.scrollY;
          pacContainer.style.position = 'absolute';
          pacContainer.style.top = `${correctTop}px`;
          pacContainer.style.left = `${inputRect.left}px`;
          pacContainer.style.width = `${inputRect.width}px`;
        }
      }, 0);
    });
  }
}

内容的提问来源于stack exchange，提问作者Eli