[聚合文章] angular-breakpoints实现响应（resize）

在angular2中实现窗口resize的事件监测并作出响应的处理有好几种方式

1、使用@hostListeser将事件绑定上

2、使用observe对象

observer观察者模式不光能发送异步请求，还有一些处理方法

fromEvent就可以在DOM结构上直接添加事件

Rx.Observable.fromEvent(document.querySelector('button'), 'click');

3、当然也有人想到bootstrap的响应，可是bootstrap的响应是使用媒体判断在css里实现的，如果要在js或者ts里实现就要想其他的方法了。

angular-breakpoints就可以认为是bootsrap的js（ts）响应的方法。它也会和bootstrap类似的设置了一些像lg，md，xs等的breakpoints来实现。

我们来看使用，也可以参考github的地址 angular-breakpoints

安装

npm install angular-breakpoints --save

引入到组件内并使用

import {BreakpointsService, BreakpointEvent} from 'angular-breakpoints';

constructor(
private breakpointsService: BreakpointsService
) {}

然后调用service就可以实现功能了，我们要使用的就是BreakpointEvent，所以import的时候也要import进来.

这时候在你缩放窗口的时候你就会看到这几个breakpoints变化时的输出了。

ngOnInit() {
this.breakpointsService.changes.subscribe((event: BreakpointEvent) => {
console.log(event);
})
}

我们去看他的源代码，实际上还是通过observer的fromEvent实现的

我们再来看默认的breakpoints，我们看到代码里有默认的BreakpointConfig，我们看下默认的breakpoints

所以如果我们需要的就是这几个，那么就不需要做其他的引入处理，我们再来看BreakpointEvent是个什么格式的数据。

先看源码

再来看我们再控制台得到的输出

直接使用它默认的breakpoints，我们也可以自定义自己的breakpoints。

使用自定义的breakponits，就需要修改BreakpointConfig，那么需要引入BreakpointConfig，要生效，还需要引入breakpointsProvider

import { breakpointsProvider, BreakpointsService, BreakpointEvent, BreakpointConfig } from 'angular-breakpoints';

在component里添加provider

在里面将我们自己的config引入。定义好自己的config

这时候这些就变成我们自己定义的了。

我在使用这个的时候是在做一个响应的轮播图组件，支持banner的轮播，也支持一组多个图的轮播如下

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。