mat-datepicker 在不同的地方打开
mat-datepicker opens in different place
我在页面的 2 个位置有我的 mat-datepicker。当我点击一个地方时,它会在对面的地方打开。我该如何解决?我有 2 个不同的组件与 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);
}
尝试给出不同的“模板参考变量”(将 #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 下执行代码” - 如果您使用更改检测器并使用 .markForCheck()
-[=16=,也会发生同样的情况]
我在页面的 2 个位置有我的 mat-datepicker。当我点击一个地方时,它会在对面的地方打开。我该如何解决?我有 2 个不同的组件与 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);
}
尝试给出不同的“模板参考变量”(将 #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 下执行代码” - 如果您使用更改检测器并使用 .markForCheck()
-[=16=,也会发生同样的情况]