У меня есть два указателя даты в компоненте, я хочу, чтобы испустить {startDate: startDateValue, endDate: endDateValue}, если значения даты не являются пустыми

Question

Вот то, что я пробовал, но я получаю одинаковое значение даты для обоих входов

export class DateComponent implements OnInit {
  @Input() startDate: string;
  @Input() endDate: string;
  @Output() sendDate: EventEmitter<any> = new EventEmitter();
  @Output() emitDate: EventEmitter<any> = new EventEmitter();

  startMinDate: Date;
  startMaxDate: Date;
  endMinDate: Date;
  endMaxDate: Date;


  constructor(private moment: MomentService) {
    this.startMaxDate = this.moment.getMaxDate().toDate();
    this.startMinDate = this.moment.getMinDate().toDate();
    this.endMaxDate = this.moment.getMaxDate().toDate();
    this.endMinDate = this.moment.getMinDate().toDate();
  }

  ngOnInit() {}

  onChange({ value }) {
    const ISOString = value.toISOString();
    this.sendDate.emit(ISOString);
  }

  changedDate({ value }) {
    const ISOString = value.toISOString();
    this.emitDate.emit(ISOString);
  }
}

Родительский компонент. html, мне нужно связать эти две функции вывода с дочерний компонент

<app-date [endDate]="endDate" (sendDate)="endDate = $event" [startDate]="startDate"
          (emitDate)="startDate=$event"></app-date>

ChildComponent. html

<input matInput [matDatepicker]="picker" [value]="endDate" [min]="endMinDate" [max]="endMaxDate"
            (dateChange)="changedDate($event)">

<input matInput [matDatepicker]="picker1" [value]="startDate" [min]="startMinDate" [max]="startMaxDate"
            (dateChange)="onChange($event)">

Answer 1

Единственная проблема заключается в том, что два метода, которые запускаются при изменении даты, пересекаются. Если вы измените их, ваш код будет работать как положено. Итак, теперь у вас есть:

<input matInput [matDatepicker]="picker" [value]="endDate" [min]="endMinDate" [max]="endMaxDate" 
(dateChange)="changedDate($event)">  <====== CHANGE THIS LINE

<input matInput [matDatepicker]="picker1" [value]="startDate" [min]="startMinDate" [max]="startMaxDate"
(dateChange)="onChange($event)">    <======== AND THIS LINE

Должно быть:

<input matInput [matDatepicker]="picker" [value]="endDate" [min]="endMinDate" [max]="endMaxDate" 
(dateChange)="onChange($event)">  <====== CORRECT!!!

<input matInput [matDatepicker]="picker1" [value]="startDate" [min]="startMinDate" [max]="startMaxDate"
(dateChange)="changedDate($event)">    <======== CORRECT!!!

Проверьте этот Stackblitz, который я сделал на основе вашего кода: https://stackblitz.com/edit/angular-eroujf