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

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

Angular 2 HostListener & HostBinding

HostListener

2、使用observe对象

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

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

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

Observable详解

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

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

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

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的轮播，也支持一组多个图的轮播如下

需要将数据分组，不同的尺寸下每组的数量是不一样的，所以这里使用到了angular-breakpoints，我这里是使用了将config转化成了数组，根据数组的index来确定数量了。

这里用到了lodash，lodash对数组的很多处理还是很方便的。

toPairsIn是将对象转成了数组，chunk是将数组按照每组多少个进行分组产生新的数组。