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来做这件事，也可以使用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)');
    }
}

在datepicker中使用如下：
```
<mat-datepicker [touchUi]="isMobile" #picker></mat-datepicker>
```

Answer 2

Angular使用Breakpoints.Handset方法：

component.ts：

  isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(map(result => result.matches));

  constructor(private breakpointObserver: BreakpointObserver) {}

html：

<mat-datepicker [touchUi]="(isHandset$ | async) ? 'true' : 'false'" #picker></mat-datepicker>

如果您问我，它的处理方式非常干净。

如果您需要完整的示例，请安装navigation component schematic

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

2 个答案: