Angular - matDatepicker не работает должным образом

Question

У меня есть 3 компонента

1. main.component.html
2. мобильный-main.component.html
3. настольный main.component.html

В зависимости от ширины устройства я хочу загрузить другое представление (совершенно другой пользовательский интерфейс) с помощью MediaMatcher & ChangeDetectorRef

Моя проблема в том, что при использовании matDatepicker он не работает должным образом. Когда я меняю ориентацию, рабочий стол / мобильный пользовательский интерфейс загружен и работает должным образом, но когда я нажимаю на кнопку выбора даты, она не выскакивает после изменения ориентации (но всплывает после 2-го щелчка и далее).

Мы можем использовать 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>

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);
  }

}

мобильный-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 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() {

  }

}

Answer 1

Материал DatePicker имеет опцию для сенсорного интерфейса.Для вашего мобильного компонента добавьте 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>

Я не уверен, что это поможет странному поведению, которое вы заметили, но так как вы не используете то, что оптимизировано для мобильных устройств, этоможет решить проблему.