我已经在Angular中创建了一个Calendar组件，它在父组件中使用一些其他输入渲染了两次。有一个函数可以重置Parent组件中的所有值，所以我决定在日历组件中创建另一个重置值函数，并通过@ViewChild从父重置函数组件调用它。一切正常，但只重置了两个日历中的一个的值，我已经尝试了所有方法，但我无法弄清楚发生了什么？
日历组件：

@Output() onDateTimeBefore = new EventEmitter();
  @Output() onDateTimeAfter = new EventEmitter();
  
  onDateSelected(date: Date): void {
    const d = new Date();
    const returnedDate = this.isoDateWithoutTimeZone(date);
    this.selectedDate = returnedDate.substring(0, 10);
    if (this.time) {
      this.selectedDate = this.selectedDate + 'T' + this.time + '.000Z';
    } else {
      this.time = this.gettingTime(d);
      this.selectedDate = this.selectedDate + 'T' + this.time + '.000Z';
    }
    this.onDateTimeBefore.emit(this.selectedDate);
    this.onDateTimeAfter.emit(this.selectedDate);
  }

我在父组件中发出这两个不同的值，用两个不同的函数将它们分开。
日历HTML：

<mat-form-field class="example-full-width" appearance="outline">
  <mat-label>{{ title }}</mat-label>
  <input
    matInput
    placeholder="{{ title }}"
    [(ngModel)]="selectedDate"
  />
  <button
    class="button-calendar"
    data-testid="button-open"
    matSuffix
    mat-icon-button
    [matMenuTriggerFor]="appMenu"
  >
    <mat-icon>calendar_today</mat-icon>
  </button>
</mat-form-field>

然后像这样将它传递给父组件：

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

因此，正如我之前所说，我只能重置两个组件中的一个值，我重置值就像-> onDateTimeBefore =““和onDateTimeAfter =““一样简单。我不知道发生了什么，也不知道我错过了什么。