有什么方法可以在 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 which provides you with the same media queries as used in Angular's FlexLayout API, specified in Material Design.

预定义断点列表（使用的宽度可能不是很明显，但结合Material设计中的媒体查询就可以追溯到）：

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 中，添加对特定视口（列表）的观察查询，如断点列表中指定的那样。该列表是一个数组，可以包含多个值：

[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。随意发挥您的需求。

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

Is there any way to use Angular / flex-layout API in Typescript file in Angular 11 project

typescript

angular-material

angular-flex-layout

angular