Angular属性DOM已更新但类方法未同步，日期选择器点击无变化

原因分析 #

1. 事件执行顺序冲突：点击按钮时，模态框遮罩层会先捕获点击事件，触发dp-date-picker的close回调，调用closed()将calendarOpen设为false；之后才会触发按钮本身的click事件，此时this.calendarOpen已经被close事件修改为false，所以方法里输出的始终是false。初始输出undefined是因为你未给calendarOpen设置初始值，需要在类里初始化：calendarOpen: boolean = false;。

2. Angular变更检测特性：HTML模板中的{{calendarOpen}}能实时更新，是因为Angular的变更检测机制会在opened()和closed()执行后，自动检测属性变化并更新DOM。但按钮的click事件与close事件属于同一轮事件循环，同步执行，所以方法里拿到的是close事件修改后的最终值，而非预期的打开状态。

解决办法 #

方法1：异步获取最新值 #

利用setTimeout将读取属性的逻辑放到下一轮事件循环，等待变更检测完成后再获取值：

buttonClicked() {
  setTimeout(() => {
    console.log({ calendarOpen: this.calendarOpen });
  }, 0);
}

方法2：直接读取组件自身状态 #

ng2-date-picker组件本身提供了状态属性（如isOpen），可直接通过组件实例获取，无需自行维护calendarOpen：
首先在模板中给组件添加引用：

<dp-date-picker
  #dateComponent
  (close)="closed()"
  (open)="opened()"
  ...
></dp-date-picker>

然后在组件类中获取实例并读取状态：

import { ViewChild } from '@angular/core';
import { DpDatePickerComponent } from 'ng2-date-picker';

// ...

@ViewChild('dateComponent') dateComponent: DpDatePickerComponent;

buttonClicked() {
  const currentOpenState = this.dateComponent.isOpen;
  console.log({ calendarOpen: currentOpenState });
}

方法3：阻止事件冒泡 #

阻止按钮的点击事件向上冒泡，避免遮罩层捕获到该事件触发close回调：

<button (click)="buttonClicked(); $event.stopPropagation()">点击我</button>

这样点击按钮时只会触发自身的click事件，不会触发模态框关闭逻辑，calendarOpen就能保持当前真实状态。

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