Angular组件中属性变更时触发函数的实现方案（地图测距场景）

方法1：使用ngOnChanges钩子监听属性变化 #

实现OnChanges接口，在属性变更时自动调用addInteraction：

1. 导入OnChanges和SimpleChanges，并让组件实现该接口
2. 在ngOnChanges中检测measurement的变化，执行对应逻辑

修改后的组件代码：

import { Component, OnInit, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';

// 其他必要导入

export class MapComponent implements OnInit, AfterViewInit, OnChanges {
  measurement = false;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['measurement']) {
      addInteraction.bind(this)(this.measurement);
    }
  }

  checkValue(event: any){
    console.log(this.measurement);
  }

  ngAfterViewInit() {
    addInteraction.bind(this)(this.measurement);
  }

  // 组件其他方法
}

方法2：直接在复选框change事件中调用 #

既然change事件已经能获取最新的measurement值，直接在事件处理函数里触发addInteraction：

模板代码（调整事件处理函数） #

<div class="form-check form-switch d-flex justify-content-center">
  <input class="form-check-input btn-secondary" type="checkbox" id="flexSwitchCheckDefault" [(ngModel)]="measurement" (change)="onMeasurementToggle()"/>
  <label class="form-check-label ps-2" for="flexSwitchCheckDefault">距离测量</label>
</div>

组件代码 #

measurement = false;

onMeasurementToggle(){
  console.log(this.measurement);
  addInteraction.bind(this)(this.measurement);
}

ngAfterViewInit() {
  addInteraction.bind(this)(this.measurement);
}

方法3：给measurement属性设置setter #

通过属性setter监听值的变化，自动触发逻辑：

private _measurement = false;

get measurement(): boolean {
  return this._measurement;
}

set measurement(value: boolean) {
  this._measurement = value;
  addInteraction.bind(this)(this._measurement);
}

checkValue(event: any){
  console.log(this.measurement);
}

ngAfterViewInit() {
  addInteraction.bind(this)(this.measurement);
}

关键注意点 #

• 确保addInteraction内部实现了开启/关闭测距的完整逻辑：比如开启时添加地图交互，关闭时移除已添加的交互，避免重复创建导致的异常。
• 使用bind(this)保证addInteraction函数能正确访问组件的上下文对象。

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