css - 如何在 Angular Material 中更改 mat-datepicker 上的 touchUi 属性

Question

我将 Angular 5 与 Material Design 模块一起使用。

在我的 html 中，我有一个日期选择器:

<mat-datepicker touchUi=true #picker></mat-datepicker>

在我的 CSS 中，我设置了一些媒体查询:

/* Phones */
@media (max-width: 767px) {
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
}

/* Desktops */
@media (min-width: 1200px) {
}

如何删除 touchUi=true台式机的属性？

Answer 1

您可以使用 Angular CDK 的 BreakpointObserver这样做，以及使用 setter/getter 。

进口 LayoutModule来自 @angular/cdk/layout在您应用的模块中:

import { LayoutModule } from '@angular/cdk/layout';
// ...

@NgModule({
    imports: [
        LayoutModule
    ]

使用 @angular/cdk/layout 中的断点观察器如下(您可能需要 isMatched 的 BreakpointObserver 方法，它允许 string 或 string[] 作为媒体的参数):

import { BreakpointObserver } from '@angular/cdk/layout';
export class AppComponent {
    constructor(private breakpointObserver: BreakpointObserver){}
    // Check if device is phone or tablet
    get isMobile() {
        return this.breakpointObserver.isMatched('(max-width: 767px)');
    }
}

在您的日期选择器中按如下方式使用它:

<mat-datepicker [touchUi]="isMobile" #picker></mat-datepicker>

Official documentation

API Docs

Stackblitz Demo