Angular中设置日期选择器默认值及Observable同步双选择器方法

1. 设置日期选择器的默认范围 #

你已经通过订阅logsService.logsTime$获取到了起始和结束日期，只需在订阅回调中使用patchValue或setValue方法将值同步到FormGroup控件中即可：

ngOnInit(): void {
  this.logsService.logsTime$.pipe(takeUntil(this.unsubscribe)).subscribe((res) => {
    this.dateRange = res;
    // 用patchValue更新表单控件的默认值
    this.range.patchValue({
      start: res.fromDate,
      end: res.toDate
    });
    console.log("response in date picker one", res.fromDate, res.toDate);
  });
}

如果res.fromDate和res.toDate是字符串格式，需要先转换为Date对象（比如new Date(res.fromDate)），确保Angular Material日期选择器能正常识别。

2. 通过Observable同步两个日期选择器 #

借助服务中的Subject（推荐用BehaviorSubject，能保留最新值供新订阅者获取），可以实现两个日期选择器的值同步：

第一步：完善服务中的日期传递逻辑 #

在LogsService中定义可发送值的BehaviorSubject和对应的更新方法：

import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LogsService {
  private logsTimeSource = new BehaviorSubject<any>({ fromDate: null, toDate: null });
  logsTime$ = this.logsTimeSource.asObservable();

  // 用于发送新的日期范围
  updateLogsTime(range: { fromDate: any; toDate: any }) {
    this.logsTimeSource.next(range);
  }
}

第二步：在当前组件中监听日期变化并同步到服务 #

当当前组件的日期选择器值发生变化时，调用服务方法把新值发送出去：

ngOnInit(): void {
  // 订阅初始值，设置默认日期范围
  this.logsService.logsTime$.pipe(takeUntil(this.unsubscribe)).subscribe((res) => {
    this.range.patchValue({
      start: res.fromDate,
      end: res.toDate
    });
  });

  // 监听表单值变化，同步到服务
  this.range.valueChanges.pipe(takeUntil(this.unsubscribe)).subscribe((range) => {
    this.logsService.updateLogsTime({
      fromDate: range.start,
      toDate: range.end
    });
  });
}

第三步：在另一个日期选择器组件中同步值 #

另一个组件只需重复第一步的订阅逻辑，就能接收服务传递的最新日期值，自动更新自身的日期选择器。

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