ng2-debounce 是一个非常有用的 npm 包，它是一个 Angular 指令，用于帮助改善用户体验，以及减少检查输入框中数据的请求次数。在本文中，我们将使用示例代码和指导意义详细讨论 ng2-debounce 的用法。
简介
ng2-debounce 是一个双向绑定的指令，它可以帮助我们将用户在输入框中输入的文字进行延迟处理。这对于需要频繁发送请求的应用非常有用，例如我们的搜索应用。ng2-debounce 中包含两个重要的属性：
- delay: 表示延迟处理的时间，以毫秒为单位。
- debounce: 表示是否启用 debounce，默认是停用的。
安装
首先，我们需要通过 npm 安装 ng2-debounce，在终端中输入：
npm install ng2-debounce --save
使用
在 app.module.ts 中导入 ng2-debounce：
import { Ng2DebounceModule } from 'ng2-debounce';
@NgModule({
imports: [ Ng2DebounceModule ],
…
})在组件中使用 ng2-debounce 指令：
<input type="text" [(ngModel)]="searchTerm" [ng2-debounce]="500">
上述代码中，我们已经将 ng2-debounce 应用于文本输入框中，并为其设置了延迟时间为 500 毫秒。因此，当用户在该输入框中输入字符时，ng2-debounce 指令将处理延迟，并在 500 毫秒后将输入框的 ngModel 值更新。
示例
现在，让我们来创建一个简单的搜索例子，以演示 ng2-debounce 指令的用法。我们的搜索应用将从一个 mock JSON 数据中获取数据，这些数据将会在实时搜索中被显示出来。
首先，我们需要在 index.html 中引用 Bootstrap 样式文件和系统配置文件，如下所示：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>window.config = {};</script>接下来，我们将创建一个 SearchComponent 组件。该组件包含一个文本输入框和一个显示搜索结果的表格。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ----------------
------------
--------- -------------
--------- -
---- ------------------
---------------
------ ----------- ------------------------ ---------------------
------ --------------
-------
----
-------------
----------------
-------------
-----
--------
-------
--- ----------- ---- -- --------------
------ --------- -------
------ ------------ -------
------ ----------------- -------
-----
--------
--------
------
-
--
------ ----- --------------- -
----------- ------ - ---
------------- ----- - ---
------------------- ----- ----- --
---------- -
---------------------------------------
-------- -- -----------
-----------
---- -- -
----------------- - -----
--
----- -- -------------------
-- -- -----------------------
--
-
-上述代码中，我们通过 ng2-debounce 将 delay 设置为 500 毫秒，并从服务器中获取了一个 JSON 数据。接下来，我们实现搜索功能。我们需要在 SearchComponent 中监听 searchTerm 属性，以便在每次变化时发送 HTTP 请求。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ----------------
------ ---------------------------------
------ -----------------------------------------
------ - ---------- - ---- ------------------
------------
---
--
------ ----- --------------- -
----------- ------ - ---
------------- ----- - ---
------------------- ----- ----- --
---------- -
---------------------------------------
-------- -- -----------
-----------
---- -- -
----------------- - -----
--
----- -- -------------------
-- -- ------------------------
--
----------------------------------------------------- --------
------------------
-----------------------
------------------ ---- -- -
----- ---------- - -------------------
-------------------------------------------------------
-------- -- -----------
-----------
---- -- -
----------------- - -----
--
----- -- -------------------
-- -- ------------------------
--
---
-
-上述代码中，我们已经使用 debounceTime 和 distinctUntilChanged 操作符将搜索操作优化了一下，并将 HTTP 请求作为响应函数映射为 Observable。这样可以确保虽然我们实时搜索，但只会在用户停止输入一段时间之后才会发出请求。
总结
在本文中，我们介绍了 ng2-debounce，它是一个非常有用的 npm 包，用于帮助改善用户体验和减少检查输入框中数据的请求次数。我们详细地讲解了其对应的属性和使用方式，并提供了示例代码和指导意义。如果你使用了 ng2-debounce 并且有各种各样的想法，请在评论中分享给大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005653e81e8991b448e1ac1