Angular Material地址自动完成组件点击事件函数未100%执行问题

我太懂这种头疼的感觉了——点击自动完成选项里的span时，自定义的fillAddress函数偶尔不生效，反而触发了默认的填充行为，明明想自己接管逻辑却被组件自带的行为打断。下面给你几个可行的解决方案：

方案1：将点击事件绑定到mat-option并阻止默认行为 #

把点击事件从span移到<mat-option>上，同时调用$event.preventDefault()来阻止默认的选择填充行为。这样不管你点击选项里的任何区域，都会优先执行你的自定义函数，不会触发组件的默认逻辑：

<mat-form-field>
  <input matInput #autoCompleteAddress class="full-width" placeholder="Address" [matAutocomplete]="auto" formControlName="inputAddress">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option 
      *ngFor="let address of addresses" 
      [value]="address.full_address"
      (click)="fillAddress(address.full_address, address.address_id); $event.preventDefault();"
    >
      <span>{{ address.full_address }}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

为什么这个方法有效？因为<mat-option>本身的点击事件会触发自动完成的默认填充动作，preventDefault()会直接阻止这个原生默认行为，确保你的fillAddress函数完全接管逻辑。

方案2：增强span上的事件处理（如果必须绑定在span上） #

如果你坚持要把事件绑定在span上，可以同时使用stopImmediatePropagation()和preventDefault()，确保mat-option的默认事件监听器不会被触发：

<mat-option *ngFor="let address of addresses" [value]="address.full_address">
  <span 
    (click)="$event.stopImmediatePropagation(); $event.preventDefault(); fillAddress(address.full_address, address.address_id);"
  >{{ address.full_address }}</span>
</mat-option>

stopImmediatePropagation()会阻止当前元素上其他事件监听器执行，这样mat-option自身的点击监听器就不会被触发，彻底避免默认行为干扰。

方案3：利用Autocomplete的optionSelected事件 #

另一种更“Angular Material原生”的方式是监听自动完成的optionSelected事件，在组件层面处理逻辑并取消默认选中：

HTML模板： #

<mat-form-field>
  <input matInput #autoCompleteAddress class="full-width" placeholder="Address" [matAutocomplete]="auto" formControlName="inputAddress">
  <mat-autocomplete 
    #auto="matAutocomplete"
    (optionSelected)="handleOptionSelected($event)"
  >
    <mat-option 
      *ngFor="let address of addresses" 
      [value]="address.full_address"
      [attr.data-address-id]="address.address_id"
    >
      <span>{{ address.full_address }}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

组件TS代码： #

handleOptionSelected(event: MatAutocompleteSelectedEvent) {
  // 取消默认的选中状态，避免输入框被自动填充
  event.option.deselect();
  
  // 获取address_id（从data属性中）
  const addressId = event.option.elementRef.nativeElement.dataset.addressId;
  
  // 执行自定义填充函数
  this.fillAddress(event.option.value, addressId);
}

这个方法的优势是完全利用Material组件的原生事件，逻辑更清晰，也能避免事件冒泡带来的不确定性。

你可以根据自己的代码结构选择最适合的方案，通常方案1是最简单直接的。

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