mat-datepicker 在不同的地方打开

问题描述

我在页面上的 2 个地方有我的 mat-datepicker。当我点击一个地方时，它会在另一个地方打开。我该如何解决？我使用 mat-datepicker 有 2 个不同的组件，但打开方式不同。 也许问题是我模仿了一个组件中的点击？但为什么它打开不同的？ 这是代码

在此处打开：(child.components.html)

<mat-form-field appearance="fill">
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker ngDefaultControl></mat-datepicker>
    </mat-form-field>

点击这里：(parent.component.html)

<mat-form-field appearance="fill">
        <mat-label>Choose a date</mat-label>
        <input [min]="minDate" (dateInput)="onDate($event)" matInput [matDatepicker]="picker" (keydown)="false">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker ngDefaultControl></mat-datepicker>
      </mat-form-field>

Onchange 事件像这样打开日历：

 public onTabChange(event: MatButtonToggleChange): void {
      setTimeout(() => {
        const element: HTMLElement = document.getElementsByClassName('mat-icon-button')[0] as HTMLElement;
        element.click();
      },200);
  }

解决方法

尝试给出不同的“模板引用变量”（将一个 dpkg -s libboost-dev | grep 'Version' 替换为例如 #picker，并将 #picker2 替换为 picker。

关于模拟点击（不是问题）建议使用ViewChild，直接使用open方法

picker2

请注意，您无需“等待”200 毫秒。 setTimeout 对 angular 说：“嘿，你！重绘应用程序，然后记住在 setTimeout 下执行代码”-如果您使用更改检测器并使用 import {MatDatepicker} from '@angular/material/datepicker'; @ViewChild('picker2') datepicker:MatDatepicker<any> public onTabChange(event: MatButtonToggleChange): void { setTimeout(() => { this.datepicker.open() }); } -