Angular 我需要从子组件获取一个Datepicker值，并在父组件的onClick中使用它

我有一个简单的角度与路由和形式，是连接到本地数据库的网站。我设置了一个API来连接这个数据库，使用表单我可以从这个数据库中提取数据；目前，我希望能够使用两个单独的日期选择器，并将它们用作数据库搜索的日期范围。我有一个子组件设置，其中包括一个日期选择器，然后在父组件中使用表单调用它两次。子组件如下所示：

日期范围.component.html

<div class="input-group">
  <input  class="form-control mb-2 mr-sm-2" [name]="name" 
         placeholder="From date" value="" [(ngModel)]="model" 
         #dp="ngbDatepicker" ngbDatepicker>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary calendar mb-2 mr-sm-2" (click)="dp.toggle()"></button>
  </div>
</div>

<app-date-range name="dp1" (dateModel)="dateModel($event)" [model]="model"
                    #productFromDate>

</app-date-range>
<app-date-range name="dp2" (dateModel)="dateModel($event)" [model]="model"
                    #productToDate>

    </app-date-range>
    
    <button (click)=
"searchProducts(productFromDate.value, productToDate.value);" type="submit" class="btn btn-primary">Search</button>

我的问题是，尽管我尝试了多种方法，但似乎找不到一种方法可以将子日期选择器中的日期值转换为我可以在搜索方法中使用的格式，例如

productFromDate.value

任何建议，甚至是正确方向的观点都将不胜感激！我只使用Angular大约3周了，所以还在学习

更新：

---

我已经用Angular Material日期选择器完成了整个工作，并使用MatDatepickerInputEvent使其正常工作。我在这里看到的第一个问题是，您尚未在DateRangeComponent类中实现OnChanges

export class Date RangeComponent implements OnChanges

其次，您需要实现ngOnChanges功能：

ngOnChanges(changes: SimpleChanges) {
    // your logic here
}

---

如果要显示这些值，可以使用console.log并检查这些值是如何变化的。

这里有点困惑，您是否无法从子组件获取日期值？或者您可以从子组件获取值，但格式不正确？Tbh，我不知道是否获取正确，我可以找到任何方法打印出值，以查看其是否正确。因此，我需要来自日期选择器的值，并且我希望能够将它们作为参数传递给

searchProducts

方法。

export class Date RangeComponent implements OnChanges

ngOnChanges(changes: SimpleChanges) {
    // your logic here
}