Question

我有3个组成部分

main.component.html
mobile-main.component.html
desktop-main.component.html

基于设备的宽度，我想使用MediaMatcher和ChangeDetectorRef加载不同的视图（完全不同的UI）

我的问题是使用matDatepicker时无法正常工作。当我更改方向时，桌面/移动用户界面加载正常工作，但是当我单击日期选择器时，它在更改方向后不会弹出（而是从第二次单击开始弹出）。

我们可以使用chrome切换设备工具栏进行仿真。

main.component.html

<app-desktop-main *ngIf="!mobileQuery.matches"></app-desktop-main>
<app-mobile-main *ngIf="mobileQuery.matches"></app-mobile-main>

main.component.ts

export class MainComponent implements OnInit, OnDestroy {

  mobileQuery: MediaQueryList;

  _mobileQueryListener: () => void;

constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 760px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

}

mobile-main.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

mobile-main.component.ts

export class MobileMainComponent implements OnInit, OnDestroy {

constructor() {

  }

}

desktop-main.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

desktop-main.component.ts

export class DesktopMainComponent implements OnInit, OnDestroy {

constructor() {

  }

}

Answer 1

材料日期选择器具有用于触摸ui的选项。对于您的移动组件，添加touchUi作为下拉元素：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>

我不确定这是否会帮助您注意奇怪的行为，但是由于您未使用针对移动设备优化的功能，因此可以解决此问题。

角度-matDatepicker无法正常工作

1 个答案: