Angular CDK Layoout检测断点实例解析

angular cdk检测断点

angular cdk有一个布局包，其服务可以轻松检测窗口大小并与媒体查询匹配。这使得你可以完全控制ui并适应不同的屏幕尺寸。

让我们快速了解一下如何使用cdk的布局模块。

setup

---

首先，您需要确保在您的应用中安装了angular cdk：

$ npm install @angular/cdk

# or, using yarn:
$ yarn add @angular/cdk

然后导入布局模块，并将其添加到ngmodule的导入列表中：

import { browsermodule } from '@angular/platform-browser';
import { ngmodule } from '@angular/core';
import { layoutmodule } from '@angular/cdk/layout';

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


@ngmodule({
  declarations: [
    appcomponent
  ],
  imports: [
    browsermodule,
    layoutmodule
  ],
  providers: [],
  bootstrap: [appcomponent]
})
export class appmodule { }

你现在可以在中开始使用service了。

　breakpointobserver

---

breakpointobserver本身是一个service，并且它有两个方法，分别是ismatched和observe。

breakpointobserver.observe

observe方法返回一个可被观察的breakpointstate类型对象，可以用于观察窗口何时在匹配媒体查询之间发生变化。

demo 1

下面是一个简单的示例，如果窗口大小在小于500px且等于或者大于500px之间变化，则会将消息打印到控制台。

import { component, oninit } from '@angular/core';

import { breakpointobserver, breakpointstate } from '@angular/cdk/layout';

@component({ ... })
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 is 500px or over!');
        } else {
          console.log('viewport is getting smaller!');
        }
      });
  }
}

breakpointstate接口为我们提供了一个名为matches的布尔属性。

demo 2

我们也可以使用breakpoints对象，而不是使用手写的媒体查询，它为我们提供了常见断点的键：

import {
  breakpointobserver,
  breakpoints,
  breakpointstate
} from '@angular/cdk/layout';

@component({ ... })
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'
          );
        }
      });
  }
}

portrait为竖屏显示，landscape为横屏显示。

breakpointobserver.ismatching

对于简单的一次性匹配，可以使用ismatching方法。如果组件初始化时窗口至少为40rem高，则输出到控制台。

// ...

ngoninit() {
  if (this.breakpointobserver.ismatched('(min-height: 40rem)')) {
    console.log('enough room!');
  }
}

// ...

mediamatcher

---

mediamatcher是一个包含javascript的matchmedia的service。与breakpointobserver.observe一样，他可以用于观察窗口大小相对于给定媒体查询的变化。

demo

import { component, oninit, ondestroy } from '@angular/core';

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

@component({ ... })
export class appcomponent implements oninit, ondestroy {
  matcher: mediaquerylist;

  constructor(public mediamatcher: mediamatcher) {}

  ngoninit() {
    this.matcher = this.mediamatcher.matchmedia('(min-width: 500px)');

    this.matcher.addlistener(this.mylistener);
  }

  ngondestroy() {
    this.matcher.removelistener(this.mylistener);
  }

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

与breakpointobserver.observe的不同之处在于，mediamatcher使我们能够访问本机matchquerylist对象，这在某些情况下可能是必需的。

你可以到angular cdk layout api查看相关api。

extension

---

这里扩展一下在angular内使用javascript实现同样的方式。

matchmedia

在angular内是可以直接使用window的，window本身就是有很多方法和属性供我们使用的。

现在我们实现一个在程序加载时判断当前设备是横屏还是竖屏。

demo 1

import { component, oninit } from '@angular/core';

@component({ ... })
export class appcomponent implements oninit {

  isportrait = false;
  constructor() {}

  ngoninit() {
    this.isportrait = window.matchmedia('(orientation: portrait)').matches;
    if (isportrait) {
        consloe.log('this is portrait');
    }
  }
}

那我们如何实现初始化时窗口的大小等等呢，看下面的例子。

demo 2

import { component, oninit } from '@angular/core';

@component({ ... })
export class appcomponent implements oninit {

  constructor() {}

  ngoninit() {
    if (window.innerwidth >= 960) {
        consloe.log('>= 960');
    } else {
        consloe.log('< 960');
    }
  }
}

listen window size

上面我们介绍使用angular监听窗口的大小变化，下面我们使用另一种方式实现。

demo 3

import { component, oninit, hostlistener } from '@angular/core';

@component({ ... })
export class appcomponent implements oninit {

  constructor() {}

  ngoninit() {
  }

  @hostlistener('window:resize')
  public onwindowresize(): void {
      if (window.innerwidth >= 960) {
        consloe.log('>= 960');
      } else if (window.innerwidth >= 600 && window.innerwidth < 960) {
         consloe.log('>= 600 && < 960');
      } else {
         consloe.log('< 600');
      }
  }
}

这里当窗口大小发生变化的时候onwindowresize函数会被触发执行，进而实现了实时监听窗口大小变化，然后作出改变。

thank you!