0

我有 3 个组件

  1. main.component.html
  2. mobile-main.component.html
  3. 桌面-main.component.html

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

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

我们可以使用 chrome toggle-device-toolbar 来模拟。

main.component.html

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

主要组件.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>

移动主组件.ts

export class MobileMainComponent implements OnInit, OnDestroy {

constructor() {

  }

}

桌面-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>

桌面-main.component.ts

export class DesktopMainComponent implements OnInit, OnDestroy {

constructor() {

  }

}
4

1 回答 1

1

Material datepicker 有一个 touch 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>

我不确定这会有助于您注意到的奇怪行为，但由于您没有使用针对移动设备优化的东西，它可能会解决问题。

于 2019-05-28T15:25:34.463 回答