angular - 有什么方法可以在 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 .
要遵循的步骤:

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

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

进口 BreakpointObserver , Breakpoints和 BreakpointState在你的组件里面。

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

添加 BreakpointObserver给构造函数。

在您的ngOnInit 内，为特定视口(viewport)(列表)添加观察查询，在断点列表中指定。该列表是一个数组，可以包含多个值:

[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 .随意玩弄你的需求。