PrimeNG p-calendar作p-table过滤器时如何按引用传递历史日期参数

核心问题解答 #

你期望的直接传入Date变量、在函数内部修改原值的写法无法直接实现，这是JavaScript/TypeScript的语言特性决定的：所有函数参数都按值传递，即便Date属于引用类型，你传递给函数的实际是变量所持有的引用的副本，在函数内部直接给形参赋值只会修改这个副本的指向，不会影响组件侧的原始变量。

优化方案 #

两种可落地的优雅写法，都可以去掉模板里冗余的赋值逻辑：

方案1：用对象包裹历史日期（满足你要的内部修改需求）

对象的引用在参数传递过程中不会改变，你可以把历史日期挂在对象属性上，在服务内部直接修改属性值即可同步到组件侧：

1. 组件侧定义包裹对象：

// 组件内定义，可同时存放多个日期过滤器的历史值
public filterMeta = {
  previousStartDate: null as Date | null,
  // 如果有结束日期过滤可以直接加字段
  // previousEndDate: null as Date | null
}

2. 模板简化调用，不需要赋值操作：

<p-calendar #startDate appendTo="body" dateFormat="dd M yy" 
    (onSelect)="calendarService.handleSelection(dt, startDate, 'startDate', 'equals', filterMeta, 'previousStartDate')" 
    (onBlur)="calendarService.handleSelection(dt, startDate, 'startDate', 'equals', filterMeta, 'previousStartDate')"
    styleClass="sym-column-filter">
</p-calendar>

3. 调整服务方法：

handleSelection(
  dt: Table, 
  calendar: Calendar, 
  field: string, 
  comparisonMethod: string, 
  filterMeta: Record<string, Date | null>, 
  filterKey: string
): void {
    const currValue = calendar.value;
    // 修复原逻辑的判断漏洞：同时间不同Date实例用全等判断会误判，改用时间戳对比
    if (currValue?.getTime() === filterMeta[filterKey]?.getTime()) {
        return;
    }
    dt.filter(currValue ? this.dateService.formatDate(currValue) : '', field, comparisonMethod);
    // 直接修改对象属性，组件侧会同步更新
    filterMeta[filterKey] = currValue;
}

方案2：组件侧封装一层调用（更符合Angular最佳实践）

模板里不做复杂逻辑处理，调用组件自身的封装方法，可读性和可维护性更高：

1. 模板代码：

<p-calendar #startDate appendTo="body" dateFormat="dd M yy" 
    (onSelect)="handleStartDateChange(dt, startDate)" 
    (onBlur)="handleStartDateChange(dt, startDate)"
    styleClass="sym-column-filter">
</p-calendar>

2. 组件代码：

public previousStartDate: Date | null = null;

constructor(public calendarService: CalendarService) {}

handleStartDateChange(dt: Table, calendar: Calendar) {
    this.previousStartDate = this.calendarService.handleSelection(dt, calendar, 'startDate', 'equals', this.previousStartDate);
}

原服务的handleSelection方法不需要做任何修改。

实现效果 #

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