cdk Layout是cdk 提供的响应式布局工具，提供了实用程序来构建响应屏幕大小更改的响应UI，其服务可以轻松检测窗口大小并与媒体查询匹配。这使得你可以完全控制UI并适应不同的屏幕尺寸。官网地址 https://material.angular.io/cdk/layout/overview

和其他cdk里面的功能模块使用一样，layout使用之前也要provider LayoutModule。之后才能正常使用cdk Layout里面提供的Service。

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

一 BreakpointObserver

BreakpointObserver是cdk Layout里面提供的Service。用于评估媒体查询和对其变化作出反应的一个Service

1.1 BreakpointObserver属性方法

export declare class BreakpointObserver implements OnDestroy {
    /**
     * 简单的一次性匹配，判断当前屏幕是否符合匹配条件
     */
    isMatched(value: string | string[]): boolean;
    /**
     * 监听设置的条件。在条件满足的时候，或者不满足的时候触发
     */
    observe(value: string | string[]): Observable<BreakpointState>;
}

1.2 BreakpointObserver使用

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

@Component({
    selector: 'app-cdk-layout',
    templateUrl: './cdk-layout.component.html',
    styleUrls: ['./cdk-layout.component.less']
})
export class CdkLayoutComponent implements OnInit {


    constructor(public breakpointObserver: BreakpointObserver) {
    }

    ngOnInit() {

        // 简单的一次性匹配，可以使用isMatching方法。如果组件初始化时窗口至少为40rem高，则输出到控制台
        if (this.breakpointObserver.isMatched('(min-height: 40rem)')) {
            console.log('窗口至少为40rem高!');
        } else {
            console.log('窗口没有40rem高!');
        }

        // 注意哦，不会一直回调哦，只会在第一次满足或者不满足条件的时候回调。
        this.breakpointObserver
            .observe(['(min-width: 500px)'])
            .subscribe((state: BreakpointState) => {
                if (state.matches) {
                    console.log('窗口宽度大于或者等于500px!');
                } else {
                    console.log('窗口不满足宽度大于或者等于500px!');
                }
            });

        // 也可以使用Breakpoints对象，而不是使用手写的媒体查询，它为我们提供了常见断点的键。如果多个参数，当有一个条件满足或者不满足的时候就会触发
        this.breakpointObserver
            .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
            .subscribe((state: BreakpointState) => {
                if (state.matches) {
                    console.log(
                        'Breakpoints.Small or Breakpoints.HandsetPortrait'
                    );
                }
            });


    }

}

二 MediaMatcher

MediaMatcher也是一个Servic，用于媒体查询匹配。

2.1 MediaMatcher属性方法

export declare class MediaMatcher {
    /**
     * 评估给定的媒体查询并返回可从中检索结果的本机MediaQueryList。
     * 确认布局引擎将触发所提供的选择器查询st。
     */
    matchMedia(query: string): MediaQueryList;
}

2.2 MediaMatcher使用

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

@Component({
    selector: 'app-cdk-layout',
    templateUrl: './cdk-layout.component.html',
    styleUrls: ['./cdk-layout.component.less']
})
export class CdkLayoutComponent implements OnInit, OnDestroy {

    matcher: MediaQueryList;

    constructor(public mediaMatcher: MediaMatcher) {
    }

    ngOnInit() {

        this.matcher = this.mediaMatcher.matchMedia('(min-width: 500px)');
        this.matcher.addListener(this.matchMediaListener);
    }

    ngOnDestroy() {
        this.matcher.removeListener(this.matchMediaListener);
    }

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

}

如果你在测试的时候发现没有打印，你可以试着去改变浏览器窗口的大小。

三 Breakpoints

Breakpoints里面的内容是cdk里面提供的一些屏幕尺寸常量。如下所示。

export const Breakpoints = {
  XSmall: '(max-width: 599.99px)',
  Small: '(min-width: 600px) and (max-width: 959.99px)',
  Medium: '(min-width: 960px) and (max-width: 1279.99px)',
  Large: '(min-width: 1280px) and (max-width: 1919.99px)',
  XLarge: '(min-width: 1920px)',

  Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
           '(max-width: 959.99px) and (orientation: landscape)',
  Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
          '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
  Web: '(min-width: 840px) and (orientation: portrait), ' +
       '(min-width: 1280px) and (orientation: landscape)',

  HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',
  TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',
  WebPortrait: '(min-width: 840px) and (orientation: portrait)',

  HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',
  TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
  WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};

cdk Layout里面的内容也比较少，就是用来做响应式布局的。让我们可以设置条件。在条件满足或者不满足的时候触发事件。实例连接 https://github.com/tuacy/angular-cdk-study

Angular cdk 学习之 Layout