欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular CDK Layoout检测断点实例解析

程序员文章站 2023-11-02 15:39:52
angular cdk检测断点 angular cdk有一个布局包,其服务可以轻松检测窗口大小并与媒体查询匹配。这使得你可以完全控制ui并适应不同的屏幕尺寸。 让我们快速了解一...

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!