Angular9 Google Places Autocomplete无结果时失焦获取输入值方案咨询

第一步：修改HTML模板，绑定失焦事件 #

给input元素添加blur事件绑定，代码如下：

<input #search class="form-control" [formControl]="myAddress" type="text" placeholder="Enter a location" (blur)="onSearchBlur()">

第二步：修改TS组件逻辑 #

首先新增两类成员：

• 新增Output事件，用于向外传递无匹配结果时用户手动输入的地址
• 新增选中状态标志位，用来区分用户是选中了谷歌推荐的地址，还是直接失焦无匹配结果
  然后调整原有的place_changed监听逻辑更新选中状态，最后实现失焦事件的处理函数。
  完整修改后的TS代码如下：

export class AddressComponent implements OnInit {

  @Output() onSelectAddress = new EventEmitter<CustomAddressModel>();
  // 新增：向外传递手动输入的地址
  @Output() onManualInput = new EventEmitter<string>();

  myAddress = new FormControl('');
  selectedAddress: PlaceResult;
  // 新增：标志位，记录用户是否选中了谷歌推荐的地址
  private isPlaceSelected = false;

  @ViewChild('search')
  searchElementRef: ElementRef;

  constructor(
    private _mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone,
  ) { }

  ngOnInit(): void {

    this._mapsAPILoader.load().then(() => {

      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          // 触发了地址选择，先把标志位设为true
          this.isPlaceSelected = true;
          this.selectedAddress = autocomplete.getPlace();

          if (!this.selectedAddress.geometry) {
            return;
          }

          const result = {
              lat: this.selectedAddress.geometry.location.lat(),
              long:  this.selectedAddress.geometry.location.lng(),
              strAddress:  this.selectedAddress.formatted_address
          } as CustomAddressModel;

          this.onSelectAddress.emit(result);

        });
      });
    });
  }

  // 新增：失焦事件处理函数
  onSearchBlur(): void {
    // 如果已经选中了谷歌推荐地址，重置标志位后直接返回，不处理手动输入
    if (this.isPlaceSelected) {
      this.isPlaceSelected = false;
      return;
    }
    // 无匹配地址，获取输入框当前值，向外传递
    const inputText = this.myAddress.value?.trim() || '';
    if (inputText) {
      this.onManualInput.emit(inputText);
    }
  }
}

补充说明 #

• 如果你不需要区分「选中推荐地址」和「手动输入地址」两种场景，也可以直接在onSearchBlur里把手动输入的内容封装成CustomAddressModel格式，直接复用onSelectAddress事件向外传递即可
• 标志位的作用是避免用户选中推荐地址后失焦，重复触发事件

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