angular4中判断滚动条是否到达底部

展示结果:

    

当滚动条接近于底部的时候在控制台输出文字。

一、首先通过命令新建一个项目

 ng new test01

ng 是angular-cli命令 ；new 是新建 ；test01 是项目名称，项目名称可以随意，不过尽量按照规范来。

二、然后创建三个组件：home组件、list组件、item组件

ng g c home

ng g c list

ng g c item

g 代表的是generate，生成；

c 代表的是component, 组件

home、list、item是生成的组件名称。

三、将新创建的组件使用起来，使用方法如下：

四、编写数据

在list组件中，定义了一个lists变量，将里面的内容作为数据，传递给item。那是通过什么传递这个数据呢？

在list的html页面中，我们看到了这个 [item]="list" ,这是angular中的父元素传值到子元素，通过[子元素]="父元素"的方式。*ngFor是将lists这个数组，循环遍历了一下，list就是数组中的每个对象。然后，我们在item中接收一下list传递过来的值：

现在，我们就有一个item的变量，变量的值是lists数组中的每一个对象了。

在item的html页面中用插值表达式{{...}}的方式展示出来。

五、编写逻辑部分：

首先，因为是滚动条，所以我们要想办法获得scroll事件。我这里是通过RXjs来获得的：

    

图中红色圈中的部分就是实现本次效果的代码了。

如果有问题，欢迎给我留言。