Angular11动态创建Google Maps地址自动补全输入框失效问题

架构老林

2026-9-2

问题根因

你的代码不生效核心是三个逻辑错误：

你在addAddress里手动调用document.createElement创建的input元素从来没有被真正插入到页面DOM中。Angular的*ngFor只会读取你数组里元素的属性（比如你绑定的id），然后自己生成全新的input DOM节点渲染到页面，你给你手动创建的游离DOM绑定谷歌自动补全，和页面上实际显示的输入框完全无关。
你在往数组里push新元素后立刻尝试绑定事件，这时候Angular还没完成DOM更新，新的输入框还没被渲染到页面上，根本找不到对应的DOM节点。
每次新增输入框都全量遍历数组给所有输入框重复绑定Autocomplete事件，会导致旧输入框重复触发回调，存在内存泄漏和逻辑重复问题。

修复方案

完全按照Angular的框架逻辑实现，不要自己手动操作DOM创建元素，用Angular提供的视图查询能力拿到实际渲染的DOM节点，等视图更新完成后再给新增的输入框绑定自动补全：

首先修改组件类的逻辑，把存DOM元素的数组改成纯配置数组，用@ViewChildren拿实际渲染的输入框引用：

import { Component, EventEmitter, Output, QueryList, ElementRef, ViewChildren, AfterViewInit } from '@angular/core';

@Component({
  // 你原有组件元配置保持不变即可
})
export class YourComponent implements AfterViewInit {
  @Output() setAddress = new EventEmitter<google.maps.places.PlaceResult>();
  
  // 只存输入框的配置项，不存DOM元素
  addressInputs: { id: number }[] = [];
  inputCounter = 0;
  // 存储每个输入框对应的Autocomplete实例，用于后续销毁
  private autocompleteInstances: google.maps.places.Autocomplete[] = [];
  // 拿模板里实际渲染的所有地址输入框
  @ViewChildren('addressInput') addressInputEls!: QueryList<ElementRef<HTMLInputElement>>;

  ngAfterViewInit(): void {
    // 初始化默认新增一个输入框
    this.addAddress();
    // 监听输入框列表的渲染变化，每次有新输入框渲染完成就绑定自动补全
    this.addressInputEls.changes.subscribe((list) => {
      const currentIndex = list.length - 1;
      // 已经绑定过的输入框跳过，避免重复绑定
      if (currentIndex < this.autocompleteInstances.length) return;
      const inputEl = list.get(currentIndex)?.nativeElement;
      if (!inputEl) return;

      const autocomplete = new google.maps.places.Autocomplete(inputEl, {
        componentRestrictions: { country: 'CA' },
        types: ['geocode'],
      });
      autocomplete.addListener('place_changed', () => {
        const place = autocomplete.getPlace();
        this.setAddress.emit(place);
      });
      this.autocompleteInstances.push(autocomplete);
    });
  }

  public addAddress(): void {
    this.addressInputs.push({ id: this.inputCounter++ });
  }

  public removeAddress(): void {
    if (this.addressInputs.length === 0) return;
    this.addressInputs.pop();
    // 移除输入框时同步销毁对应的Autocomplete实例，避免内存泄漏
    const removedInstance = this.autocompleteInstances.pop();
    if (removedInstance) {
      google.maps.event.clearInstanceListeners(removedInstance);
    }
    if (this.inputCounter > 0) {
      this.inputCounter--;
    }
  }
}

修改模板，给循环生成的input加上模板引用变量，让Angular能自动收集到这些元素的引用，不需要手动创建DOM：

<div>
  <button style="margin-top: 10px" (click)="addAddress()">Add address</button>
  <button style="margin-top: 10px" (click)="removeAddress()">
    Remove address
  </button>
</div>

<div *ngFor="let item of addressInputs; let i = index">
  <!-- 加#addressInput标记，供@ViewChildren查询 -->
  <input #addressInput type="text" class="query" />
</div>

补充说明

不要在Angular项目里手动通过document.createElement创建、插入DOM元素，这类操作应该交给框架完成，手动操作很容易出现和框架渲染周期不同步的问题。
涉及DOM操作的逻辑一定要等Angular视图更新完成后再执行，QueryList.changes的回调会在对应查询的元素完成渲染后触发，是绑定动态生成元素事件的最佳时机。
谷歌地图的Autocomplete实例不用的时候要主动清除监听器，不然会造成内存泄漏。

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