Angular：谷歌地图交互时为何频繁调用插值中的getTitle()函数？

问题原因 #

• Angular默认的变更检测机制会在每个事件循环周期（包括浏览器事件、异步操作等）触发检测，插值表达式中的getTitle()方法会在每次检测时被执行。
• Google Maps的交互操作（如鼠标悬停、拖拽地图、缩放）会频繁触发浏览器事件，每一次交互都会触发Angular的变更检测，导致getTitle()被反复调用。

解决方案 #

方案1：直接绑定属性（最优解） #

避免在插值表达式中调用方法，直接绑定组件属性，这样只会在属性值变化时更新视图：

修改模板文件 map.component.html：

<div id="map-wrapper">
  <div id="map"></div>
  <div id="list">
    <code>
      {{ title }}
    </code>
  </div>
</div>

修改组件文件 map.component.ts，将title改为公共属性（模板需要访问）：

// 替换原私有title定义
public title: string = "Title";

方案2：切换到OnPush变更检测策略 #

如果组件不需要频繁更新视图，可以启用OnPush策略，只有当输入属性变化或组件内部主动触发时才执行变更检测：

1. 导入相关依赖：

import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

2. 修改组件装饰器配置：

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

3. 若后续需要手动更新视图（比如title值改变时），调用变更检测器的方法：

constructor(private cdr: ChangeDetectorRef) {
  this.center = { lat: 47.280622, lng: 8.638879 };
  this.zoom = 15;
}

// 示例：更新title并触发视图更新
updateTitle(newTitle: string) {
  this.title = newTitle;
  this.cdr.markForCheck();
}

方案3：缓存方法返回结果（不推荐） #

如果必须保留方法调用逻辑，可以缓存结果，仅当依赖值变化时重新计算：

private title: string = "Title";
private cachedTitle: string = this.title;

getTitle(): string {
  if (this.cachedTitle !== this.title) {
    this.cachedTitle = this.title;
  }
  return this.cachedTitle;
}

注：此方法仍会在变更检测时调用getTitle()，只是减少了重复计算，优先级低于前两种方案。

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