Обнаружение точек останова с помощью Angular CDK

Development | Amber | Комментировать запись

В Angular CDK есть пакет layout, который предоставляет сервисы для определения размеров области просмотра и сопоставления с медиа-запросами. Он позволяет вам полностью контролировать пользовательский интерфейс и адаптироваться к различным размерам экрана.

В этом мануале мы применим модуль лейаутов CDK в проектах Angular.

Требования

• Локальная установка Node.js, которую можно получить, следуя инструкциям для вашего дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
• Также предполагается, что у вас есть глобальная установка @angular/cli. Читайте мануал Шпаргалка по Angular CLI: основные команды и флаги.
• Базовое знакомство с медиа-запросами CSS. Больше информации вы найдете в руководстве Медиа-запросы CSS: основы работы.

Это руководство было протестировано на Node v16.6.1, npm 7.20.3, @angular/core v12.2.0 и @angular/cdk v12.2.0.

Настройка проекта

Для создания нового проекта можно использовать @angular/cli.

В окне терминала используйте следующую команду:

ng new AngularBreakpointsExample --style=css --routing=false --skip-tests

Она создаст новый проект Angular со стилями CSS (также доступны Sass, Less и Stylus), без маршрутизации и тестирования.

Перейдите в только что созданный каталог проекта:

cd AngularBreakpointsExample

Затем установите @angular/cdk:

npm install @angular/cdk@12.2.0

Импортируйте модуль layout и добавьте его в список импортов NgModule в src/app/app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LayoutModule } from '@angular/cdk/layout';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь вы можете использовать доступные сервисы и утилиты в ваших компонентах. Давайте обсудим каждый из них.

Использование BreakpointObserver.observe и BreakpointState

Метод observe возвращает наблюдаемый объект типа BreakpointState и может использоваться для наблюдения за изменением области просмотра между (не)соответствием медиа-запросу.

В этом примере (src/app/app.component.ts) сообщение регистрируется в консоли, если размер области просмотра изменяется от <500 пикселей до ≥500 пикселей:

import { Component, OnInit } from '@angular/core';
import {
  BreakpointObserver,
  BreakpointState
} from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(public breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver
      .observe(['(min-width: 500px)'])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          console.log('Viewport width is 500px or greater!');
        } else {
          console.log('Viewport width is less than 500px!');
        }
      });
  }
}

Примечание: Вам также, вероятно, понадобится удалить {{ title }} из app.component.html, чтобы избежать ошибки.

Интерфейс BreakpointState выдает нам логическое свойство matches.

Использование Breakpoints

Вместо того чтобы использовать написанные вручную запросы, мы можем также применить объект Breakpoints, который дает нам ключ к общим точкам останова:

import { Component, OnInit } from '@angular/core';
import {
  BreakpointObserver,
  Breakpoints,
  BreakpointState
} from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(public breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver
      .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          console.log(
            'Matches small viewport or handset in portrait mode'
          );
        }
      });
  }
}

В этом примере мы использовали предопределенные точки останова для Breakpoints.Small и Breakpoints.HandsetPortrait.

Использование BreakpointObserver.isMatched

Кроме одноразового сопоставления можно также использовать метод isMatching.

import { Component, OnInit } from '@angular/core';
import {
  BreakpointObserver,
  BreakpointState
} from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(public breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    if (this.breakpointObserver.isMatched('(min-height: 40rem)')) {
      console.log('Viewport has a minimum height of 40rem!');
    }
  }
}

Этот метод отобразит сообщение, если окно просмотра имеет высоту не менее 40rem при инициализации компонента.

Использование MediaMatcher

MediaMatcher — это сервис, который использует matchMedia от JavaScript. Как и в случае с BreakpointObserver.observe, его также можно использовать для наблюдения за изменениями размера области просмотра в зависимости от заданного медиа-запроса.

Вот пример, который проверяет, равна ли ширина min-width 500px:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  matcher!: MediaQueryList;

  constructor(public mediaMatcher: MediaMatcher) {}

  ngOnInit() {
    this.matcher = this.mediaMatcher.matchMedia('(min-width: 500px)');

    this.matcher.addEventListener('change', this.myListener);
  }

  ngOnDestroy() {
    this.matcher.removeEventListener('change', this.myListener);
  }

  myListener(event: { matches: any; }) {
    console.log(event.matches ? 'match' : 'no match');
  }
}

Отличие от BreakpointObserver.observe здесь в том, что MediaMatcher дает нам доступ к собственному объекту MatchQueryList, который может понадобиться в определенных сценариях.

Примечание: Ранее в этом примере можно было использовать addListener и removeListener. addListener устарел, в современных браузерах рекомендуется использовать addEventListener. removeListener также устарел, и вместо него рекомендуется использовать removeEventListener.

Теперь у вас есть все необходимое, чтобы адаптировать свой пользовательский интерфейс к различным размерам области просмотра в Angular.

Итоги

В этом материале мы рассмотрели работу с CDK-модулем layout в проектах Angular.

Продолжить изучение данной темы можно с помощью официальной документации API модуля layout CDK.