有什么方法可以在 Angular 11 项目的 Typescript 文件中使用 Angular / flex-layout API

Question

Angular Flex Layout 在使用 Angular Material 时非常有用，有没有办法在 TypeScript 文件中使用 flex 布局 API？

例如来自this URL，有什么方法可以获取 TypeScript 文件中的 MediaQueries 值？

breakpoint  mediaQuery
xs  'screen and (max-width: 599px)'
sm  'screen and (min-width: 600px) and (max-width: 959px)'
md  'screen and (min-width: 960px) and (max-width: 1279px)'
lg  'screen and (min-width: 1280px) and (max-width: 1919px)'
xl  'screen and (min-width: 1920px) and (max-width: 5000px)'
lt-sm   'screen and (max-width: 599px)'
lt-md   'screen and (max-width: 959px)'
lt-lg   'screen and (max-width: 1279px)'
lt-xl   'screen and (max-width: 1919px)'
gt-xs   'screen and (min-width: 600px)'
gt-sm   'screen and (min-width: 960px)'
gt-md   'screen and (min-width: 1280px)'
gt-lg   'screen and (min-width: 1920px)'

我的意思是在 Angular TypeScript 文件中，我可以使用 SMALL、LARGE 和 MEDIUM 屏幕的媒体查询。

Answer 1

是的，有一种方法可以在 Angular 的 TypeScript 文件中使用这些媒体查询，但它有点隐藏。

您可以使用 Breakpoint Observer API from Angular Material，它为您提供与 Angular 的 FlexLayout API specified in Material Design 中使用的相同的媒体查询。

预定义的断点列表（使用的宽度可能并不完全明显，但与Material Design中的媒体查询一起可以追溯）：

export declare const Breakpoints: {
    XSmall: string;
    Small: string;
    Medium: string;
    Large: string;
    XLarge: string;
    Handset: string;
    Tablet: string;
    Web: string;
    HandsetPortrait: string;
    TabletPortrait: string;
    WebPortrait: string;
    HandsetLandscape: string;
    TabletLandscape: string;
    WebLandscape: string;
};

此列表可以根据您的需要进行扩展。 A simple example can be found here as a StackBlitz.

要遵循的步骤：

1. 将LayoutModule 导入您的app.module.ts 并将其添加到导入中。

import { LayoutModule } from "@angular/cdk/layout";

1. 在您的组件中导入BreakpointObserver、Breakpoints 和BreakpointState。

import {
  BreakpointObserver,
  Breakpoints,
  BreakpointState
} from "@angular/cdk/layout";

1. 在构造函数中添加BreakpointObserver。
2. 在您的ngOnInit 中，添加特定视口（列表）的观察查询，如在断点列表中指定的那样。该列表是一个数组，可以包含多个值：

[Breakpoints.Small, Breakpoints.HandsetPortrait]

代码合并：

export class AppComponent implements OnInit {
  constructor(public breakpointObserver: BreakpointObserver) {}

  viewportWidth: string;

  ngOnInit() {
    this.breakpointObserver
      .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          this.viewportWidth = "?  I am INSIDE the breakpoint";
        } else {
          this.viewportWidth = "?  I am OUTSIDE the breakpoint";
        }
      });
  }
}

Final code on StackBlitz。随意发挥您的需求。