Angular重复渲染的日历组件重置值仅生效一个的问题

你用@ViewChild获取子组件时，默认只会拿到第一个匹配的组件实例，所以重置函数只执行了第一个日历组件的逻辑，第二个完全没被调用到。

步骤1：给子组件添加模板引用标识 #

在父组件模板中，给两个<app-datetime-picker>分别设置唯一的模板引用变量：

<li class="nav-item fl p-2">
  <app-datetime-picker
    #afterPicker
    (onDateTimeAfter)="choose2($event)"
    [title]="'Created After'"
  ></app-datetime-picker>
</li>
<li class="nav-item fl p-2">
  <app-datetime-picker
    #beforePicker
    (onDateTimeBefore)="choose($event)"
    [title]="'Created Before'"
  ></app-datetime-picker>
</li>

步骤2：子组件实现重置函数 #

在app-datetime-picker组件的TS代码中，添加明确的重置方法，负责清空内部状态并同步通知父组件：

// 子组件TS代码
@Output() onDateTimeBefore = new EventEmitter();
@Output() onDateTimeAfter = new EventEmitter();
selectedDate: string = '';
time: string = '';

// ...你的onDateSelected等其他方法

reset(): void {
  this.selectedDate = '';
  this.time = '';
  // 触发输出事件，让父组件同步更新对应数据
  this.onDateTimeBefore.emit('');
  this.onDateTimeAfter.emit('');
}

步骤3：父组件调用两个子组件的重置方法 #

在父组件TS代码中，通过模板引用变量分别获取两个子组件实例，在重置函数中逐个调用重置：

// 父组件TS代码
import { ViewChild } from '@angular/core';
import { DatetimePickerComponent } from './path/to/datetime-picker.component';

// ...其他代码

@ViewChild('afterPicker') afterPicker!: DatetimePickerComponent;
@ViewChild('beforePicker') beforePicker!: DatetimePickerComponent;

resetAllValues(): void {
  // 调用两个日历组件的重置方法
  this.afterPicker.reset();
  this.beforePicker.reset();
  // 其他输入组件的重置逻辑...
}

替代方案：批量处理多个组件 #

如果后续可能新增更多日历组件，可使用@ViewChildren批量获取所有实例并遍历重置：

// 父组件TS代码
import { ViewChildren, QueryList } from '@angular/core';
import { DatetimePickerComponent } from './path/to/datetime-picker.component';

// ...其他代码

@ViewChildren(DatetimePickerComponent) datePickers!: QueryList<DatetimePickerComponent>;

resetAllValues(): void {
  this.datePickers.forEach(picker => picker.reset());
  // 其他输入组件的重置逻辑...
}

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