Angular父组件修改经纬度后如何更新app-google-maps-panel子组件

针对父组件search()方法获取新经纬度后，app-google-maps-panel子组件同步更新的需求，可根据项目使用的Angular版本选择以下任意一种实现方式：

方案1：ngOnChanges生命周期钩子（全版本通用，优先推荐） #

这是Angular官方提供的专门用于监听@Input()输入属性变更的生命周期，会在父组件更新绑定属性后自动触发，能同时拿到变更前后的值，非常适配经纬度成对更新的场景，不会重复触发更新逻辑。
子组件实现代码：

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

@Component({
  selector: 'app-google-maps-panel',
  templateUrl: './google-maps-panel.component.html'
})
export class GoogleMapsPanelComponent implements OnChanges {
  @Input() longitude!: number;
  @Input() latitude!: number;
  // 此处为组件内持有的地图实例，根据你自己的实际代码声明
  // private mapInstance?: google.maps.Map;

  ngOnChanges(changes: SimpleChanges): void {
    // 只要经度、纬度任意一个属性发生变更，就执行地图更新
    if (changes['longitude'] || changes['latitude']) {
      const currentLng = changes['longitude']?.currentValue ?? this.longitude;
      const currentLat = changes['latitude']?.currentValue ?? this.latitude;
      
      // 以下替换为你自己的地图同步逻辑，比如重设中心点、更新标记点
      console.log('接收到新经纬度，同步更新地图：', currentLat, currentLng);
      // this.mapInstance?.setCenter({ lat: currentLat, lng: currentLng });
    }
  }
}

注意：如果父组件同时给两个输入属性赋值，ngOnChanges只会统一触发一次，不会重复执行更新逻辑，性能更优。

方案2：输入属性setter拦截（适合单属性独立处理场景） #

如果需要对单个属性的变更做独立逻辑处理，可以给@Input()属性添加setter拦截器，每次父组件给属性传新值时会自动进入setter逻辑：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-google-maps-panel',
  templateUrl: './google-maps-panel.component.html'
})
export class GoogleMapsPanelComponent {
  private _longitude!: number;
  private _latitude!: number;
  // 地图实例声明
  // private mapInstance?: google.maps.Map;

  @Input()
  set longitude(val: number) {
    this._longitude = val;
    this.syncMapPosition();
  }
  get longitude(): number {
    return this._longitude;
  }

  @Input()
  set latitude(val: number) {
    this._latitude = val;
    this.syncMapPosition();
  }
  get latitude(): number {
    return this._latitude;
  }

  private syncMapPosition() {
    // 先做判空，避免两个属性先后赋值时触发半值异常
    if (this._latitude == null || this._longitude == null) return;
    // 替换为实际的地图更新逻辑
    console.log('经纬度变更，更新地图：', this._latitude, this._longitude);
    // this.mapInstance?.setCenter({ lat: this._latitude, lng: this._longitude });
  }
}

注意：如果父组件同时更新经纬度两个属性，这个方案会触发两次更新逻辑，建议在syncMapPosition方法里加防抖或者脏值检测，避免重复渲染。

方案3：Angular 16+ 信号输入（新版项目推荐） #

如果你的项目使用Angular 16及以上版本，可以用官方提供的信号式Input，本身具备原生响应能力，配合effect可以极简实现变更监听：

import { Component, effect, input } from '@angular/core';

@Component({
  selector: 'app-google-maps-panel',
  templateUrl: './google-maps-panel.component.html'
})
export class GoogleMapsPanelComponent {
  longitude = input<number>();
  latitude = input<number>();
  // 地图实例声明
  // private mapInstance?: google.maps.Map;

  constructor() {
    //  effect会自动追踪内部用到的信号值，任意一个值变更都会自动触发回调
    effect(() => {
      const currentLng = this.longitude();
      const currentLat = this.latitude();
      if (currentLat == null || currentLng == null) return;
      
      // 替换为实际的地图更新逻辑
      console.log('信号监听到经纬度变更，更新地图：', currentLat, currentLng);
      // this.mapInstance?.setCenter({ lat: currentLat, lng: currentLng });
    });
  }
}

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