介绍
ngx-in-view 是一个 Angular 所使用的 npm 包，它可以帮助我们判断一个元素是否在当前视窗内。
通常情况下，我们需要在滚动视图时来检查特定的元素是否可见。比如，你可能需要在用户到达网站下方时，才去加载下方的内容，以减少初始加载时间。
ngx-in-view 提供了一个指令，我们可以应用它来需要我们监听的元素上，然后当元素进入/离开当前视窗时，我们就能获取到通知。
下面我们来详细了解如何使用这个 npm 包。
开始使用
首先，我们需要安装这个包。你可以使用 npm 或者 yarn：
npm install ngx-in-view --save
yarn add ngx-in-view
之后我们就可以将 InView 指令导入并使用。以下是一个示例组件，我们将其嵌套在主组件中：
<div class="vertical-space-2" ngxInview (inview)="onInView($event)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dictum dolor. Nulla sollicitudin gravida orci, ac pellentesque ante vehicula vel. Donec sagittis magna nunc, ac sodales libero blandit sed. </div>
在这个示例里，我们将文字包含在 ngxInview 指令中，并使用了一个 (inview) 事件来监听当前视窗是否在这个元素中。当元素进入视窗时，我们会调用在 controller 中定义的 onInView($event) 方法。
你可以进一步优化代码，比如将事件指定为一个可重复用的事件。在接下来的章节中我们将了解如何编写这样的事件。
API
在上面的示例中，我们有个锅是当元素滚动到视窗时，不仅可以监听到当前元素视窗的进入，还可以监听视窗的离开。
但许多场合中，我们只需要监听进入视窗即可。这时只需要在使用 ngxInview 时加上一个参数就可以了。以下是 ngxInview 所支持的参数：
part
<div class="vertical-space-2" ngxInview [inViewOptions]="{part: true}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dictum dolor.
Nulla sollicitudin gravida orci, ac pellentesque ante vehicula vel. Donec sagittis
magna nunc, ac sodales libero blandit sed.
</div>当 part 参数被启用时，元素只要部分包含在视窗中，就会被判断为已经进入视窗。
threshold
<div class="vertical-space-2" ngxInview [inViewOptions]="{threshold: 0.5}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dictum dolor.
Nulla sollicitudin gravida orci, ac pellentesque ante vehicula vel. Donec sagittis
magna nunc, ac sodales libero blandit sed.
</div>当 threshold 参数被启用时，元素只有当超过给定的阈值（以 0-1 范围内的小数表示）才会被判断为已经进入视窗。
debounceTime
<div class="vertical-space-2" ngxInview [inViewOptions]="{debounceTime: 2000}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dictum dolor.
Nulla sollicitudin gravida orci, ac pellentesque ante vehicula vel. Donec sagittis
magna nunc, ac sodales libero blandit sed.
</div>debounceTime 参数表示事件监听器要等待多少毫秒才会被触发。在这个例子中，我们设为 2000 毫秒，意味着只有当前视窗压住这个元素 2 秒，才会触发 inview 事件。
还有很多其他的参数可供使用，包括 scrollContainer 和 horizontal。如果想使用它们，请查阅 官方文档。
例子
以下是一个完整的组件例子，其中包括了 ngx-in-view 的指令使用和通用的事件监听器编写。它实现了一个简单的滚动视图，每当页面上的一个项目进入当前视窗，它就会被移动到对列的顶部。该列表的滚动由 CSS 实现。
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ------------ - ---- -------
------------
--------- ------------------
--------- -
---- -----------------------------
---- -------------------
---- --- ---
---- ------------ ----------- ---- -- ------ --------- -------------------------- -------
--------
------
------
------
--
--
------ ----- ------------------- ---------- ------- --------- -
-- ----
------ -------- - ---
-- ----------- ---
-------------- - ---- -------- ------------ - - ---
---------- -
-- -------
--- ---- - - -- - - --- ---- -
------------------- ----------
-
-- -----------------
--------------------------------- -- -- -
----- -- - ------------------------------------- -- ------------
----- ---------- - -------------------
----- ------------ - -------------------------------------- -- ------------------------
----- --------- - ---------------------------
----- --- - --------------
----- ------ - -----------------
----- --------- - ------------------ -- ---------------------------------- -- ----------------------- -- --
------------------------ -- -------------------
-- -----------
--- ---- - - -- ---- - ------------------ - - ----- ---- -
----- ------ - ------------------------------------- -- ------------
----- --------- - -----------------------------------
----- ------------ - --------------------------------------
-- ------------- -- - -- --------- - ---------- -- -- -
----- --- - --------------------- - --------------------- -- --- ---------------
------------------
--------------------------------------------------
------ -- -
-- --------- -
-------
-
------------------
-------------------------------
-
---
-
-
---
------------- -- ---------------- --- ---
-
------------- -
------------------------------------------- -- -
--------------------------------------
---
-
------------------------- ------------ -
----- -------- - ---------------------
----- ------ - ---------------- - -------------------
------------------ - -------
-
--------------- ----- -
----- ----- - -------------------------
-------------------------------------
-
-在这个例子中，我们创建了一个简单的项目列表，并绑定了 ngxInview 指令。当一个项目进入视窗时，在 onInView 事件中，我们身份验证当前对象是否是我们的项目，如果是，我们就调用了一个实用函数，确保这个项目被移动到当前视窗的顶部。
通过这个例子，我们可以体验到 Angular 实际应用 ngx-in-view 的用例。同时，我们也学到了如何创建自定义监听器事件。
总结
ngx-in-view 是一个强大的 npm 包，它可以为我们的 Angular 应用带来便捷和通用的滚动视图事件管理。当我们需要负责监听端口视图元素的可见性时，我们需要使用它。为了合适地管理事件，我们应该使用 debounceTime 来控制事件的频率，同时可以指定多个自定义参数。
最后，我们在这个文章中演示了如何在一个项目列表中使用这个 npm 包，并在用户滚动视图时自动确保视图中的每个项目都被碰到。整个示例凸显了在任何 Angular 应用中添加滚动视图事件的必要性。少量的代码量大幅度改善了项目的体验，提高了用户息的沉浸感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3e81e8991b448db074