Angular13中Google Places Autocomplete自定义地址事件无法触发求助

1. Angular事件绑定失效：手动插入的自定义DOM元素不属于Angular组件模板编译时的内容，Angular的事件绑定机制不会自动为这类动态插入的元素绑定(click)事件。
2. Google Autocomplete事件不兼容：place_changed事件是Google专为自身生成的地址选项设计的，不会响应你添加的自定义地址项。

方法一：监听.pac-container点击事件（轻量推荐） #

通过原生JS监听Google自动补全容器的点击事件，手动判断点击目标是否为自定义地址项，再触发对应逻辑：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

declare var google: any;

@Component({
  selector: 'app-address-autocomplete',
  template: `<input type="text" #addressInput class="form-control">`,
})
export class AddressAutocompleteComponent implements OnInit, AfterViewInit {
  @ViewChild('addressInput') addressInput!: ElementRef;
  autocomplete: any;
  pacContainer: HTMLElement | null = null;

  ngOnInit(): void {
    // 初始化Google Places Autocomplete
    this.autocomplete = new google.maps.places.Autocomplete(
      this.addressInput.nativeElement,
      { types: ['address'] }
    );

    // 处理谷歌原生地址选择
    this.autocomplete.addListener('place_changed', () => {
      const place = this.autocomplete.getPlace();
      // 这里写谷歌地址的业务逻辑
      console.log('选中谷歌地址:', place);
    });
  }

  ngAfterViewInit(): void {
    // 等待Google容器生成后获取元素
    setTimeout(() => {
      this.pacContainer = document.querySelector('.pac-container');
      if (this.pacContainer) {
        // 绑定点击事件监听
        this.pacContainer.addEventListener('click', (event) => {
          const target = event.target as HTMLElement;
          // 通过自定义类判断是否点击了自定义地址项
          if (target.classList.contains('custom-address-item')) {
            const selectedAddress = target.textContent?.trim() || '';
            // 处理自定义地址逻辑
            console.log('选中自定义地址:', selectedAddress);
            // 填充输入框并关闭下拉
            this.addressInput.nativeElement.value = selectedAddress;
            this.pacContainer?.style.display = 'none';
          }
        });
      }
      // 插入自定义地址
      this.loadCustomAddresses();
    }, 500);
  }

  loadCustomAddresses(): void {
    if (!this.pacContainer) return;
    // 从数据库获取自定义地址（示例数据）
    const customAddresses = ['Local Address 1', 'Local Address 2'];
    customAddresses.forEach(address => {
      const item = document.createElement('div');
      // 复用Google的pac-item样式，添加自定义类用于区分
      item.className = 'pac-item custom-address-item';
      item.textContent = address;
      this.pacContainer?.appendChild(item);
    });
  }
}

方法二：自定义下拉合并地址建议（Angular化方案） #

自己实现下拉组件，同时获取Google地址建议和数据库自定义地址，合并后统一展示，完全脱离对Google DOM的直接操作：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare var google: any;

@Component({
  selector: 'app-custom-autocomplete',
  template: `
    <input type="text" #addressInput (input)="fetchSuggestions($event.target.value)" class="form-control">
    <div *ngIf="suggestions.length" class="suggestion-list">
      <div 
        *ngFor="let item of suggestions" 
        (click)="selectAddress(item)"
        class="suggestion-item"
      >
        {{ item.label }}
      </div>
    </div>
  `,
  styles: [`
    .suggestion-list { border: 1px solid #e0e0e0; max-height: 220px; overflow-y: auto; margin-top: 4px; }
    .suggestion-item { padding: 8px 12px; cursor: pointer; }
    .suggestion-item:hover { background-color: #f5f5f5; }
  `]
})
export class CustomAutocompleteComponent {
  @ViewChild('addressInput') addressInput!: ElementRef;
  suggestions: Array<{ label: string, isCustom: boolean, data?: any }> = [];

  constructor(private http: HttpClient) {}

  fetchSuggestions(query: string): void {
    if (!query.trim()) {
      this.suggestions = [];
      return;
    }

    // 获取Google地址建议
    const autocompleteService = new google.maps.places.AutocompleteService();
    autocompleteService.getPlacePredictions({ input: query, types: ['address'] }, (predictions: any[]) => {
      const googleItems = predictions.map(p => ({
        label: p.description,
        isCustom: false,
        data: p
      }));

      // 从数据库获取自定义地址
      this.http.get<any[]>(`/api/addresses?keyword=${query}`).subscribe(customItems => {
        const customAddresses = customItems.map(a => ({
          label: a.fullAddress,
          isCustom: true,
          data: a
        }));

        // 合并并去重建议（可选）
        this.suggestions = [...googleItems, ...customAddresses];
      });
    });
  }

  selectAddress(item: { label: string, isCustom: boolean, data?: any }): void {
    this.addressInput.nativeElement.value = item.label;
    this.suggestions = [];

    if (!item.isCustom) {
      // 处理Google地址的详细信息
      const placeService = new google.maps.places.PlacesService(document.createElement('div'));
      placeService.getDetails({ placeId: item.data?.place_id }, (place: any) => {
        console.log('Google地址详情:', place);
        // 这里写业务逻辑
      });
    } else {
      // 处理自定义地址业务
      console.log('自定义地址详情:', item.data);
    }
  }
}

• 方法一中，需等待Google容器生成后再操作DOM，建议加短暂延迟避免元素未加载。
• 复用Google的.pac-item样式可保证自定义项和原生选项视觉一致，避免样式冲突。
• 方法二更符合Angular组件化思想，便于维护和扩展，适合复杂业务场景。

内容的提问来源于stack exchange，提问作者Md.Rohol Amin