mat-datepicker在不同位置打开

Question

我把我的mat-datepicker放在页面上的两个地方。当我点击一个地方时，它会打开一个相反的地方。我怎么才能修复它呢？我有两个不同的组件与mat-datepicker，但它打开不同。也许问题是我模仿点击一个组件？但是为什么它会打开另一个呢？下面是代码

打开此处：(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);
  }

Answer 1

尝试给出不同的“模板引用变量”(将一个#picker替换为#picker2，将picker替换为picker2。

关于模拟点击(这不是问题)，我建议使用ViewChild并直接使用open方法

import {MatDatepicker} from '@angular/material/datepicker';

@ViewChild('picker2') datepicker:MatDatepicker<any>

public onTabChange(event: MatButtonToggleChange): void {
      setTimeout(() => {
        this.datepicker.open()
      });
  }

请注意，您不需要“等待”200毫秒。setTimeout对angular说：“嘿，你！，重新绘制应用程序，之后，记住在setTimeout下执行代码”，如果你使用change detector并使用.markForCheck()，也会发生同样的情况。