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函数会被触发执行，进而实现了实时监听窗口大小变化，然后作出改变。