简介
在 Web 开发中，搜索框是一个非常常用的组件。它不仅可以方便地让用户快速找到自己需要的信息，而且可以提高 Web 应用的交互体验和用户满意度。在 Angular 中，实现一个优雅的搜索框其实并不困难，下面就让我们一步步来学习如何实现它。
重点技术
- FormsModule
- RxJS
- Pipe
步骤
步骤一：建立搜索框组件
我们可以在 Angular 中新建一个组件来实现搜索框，比如我们为它取名为 SearchComponent。在 SearchComponent 中，我们需要创建一个 input 标签来获取用户的输入，代码如下所示：
<input type="text" [(ngModel)]="searchKeyword">
我们将用户输入绑定到了 searchKeyword 属性上，这个属性用于保存用户的输入。这里需要注意，我们在 input 标签上使用了 [(ngModel)] 双向绑定指令，这是因为 Angular 5.0+ 版本中引入了 FormsModule 才能使用的语法。FormsModule 是 Angular 中用于处理表单的模块，它提供了双向数据绑定、表单验证、动态表单等等功能。
步骤二：绑定搜索关键字
我们在上一步中已经获得了用户的输入，现在我们需要将这个输入值作为搜索关键字传递给我们要搜索的列表组件。在 SearchComponent 中，我们可以通过 EventEmitter 来实现这个功能，代码如下所示：
-- -------------------- ---- -------
------ - ---------- ------- ------------ - ---- ----------------
------------
--------- -------------
--------- -
------ ----------- ---------------------------
-------------------------------------
-
--
------ ----- --------------- -
-- ---- ------------ --
---------
------ - --- -----------------------
------------- - ---
-这里可以看到，我们通过 @Output 装饰器声明了一个 EventEmitter 对象，用来发送搜索关键字。在 input 标签的 (input) 事件中，我们调用了 update.emit(searchKeyword) 方法，并将搜索关键字作为参数传递给了这个 emit 方法。
步骤三：对搜索结果进行过滤
在我们要搜索的列表组件中，我们需要对数据进行过滤操作，从而实现搜索的功能。为了实现这个过滤操作，我们可以使用 Angular 中提供的 Pipe（管道），它可以用于在模板中处理数据。在本例中，我们将使用 Angular 自带的 filter 管道，代码如下所示：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- ----- - ----------------------
------------- - ------------
-----
-----
-
--
------ ----- ------------- -
-- --- --------------- ----------
--------
------------- - ---
-- -----------
----- - -
- ----- ----- ---- -- --
- ----- ----- ---- -- --
- ----- ----- ---- -- --
- ----- ----- ---- -- --
--
-这里我们使用了 *ngFor 指令来循环 items 列表，并通过 filter 管道将列表中与搜索关键字匹配的项过滤出来。注意，我们在 searchKeyword 变量前面添加了一个管道符号（|），表明这是一个管道操作。filter 管道接收两个参数，一个是过滤的数据列表 items，另一个是搜索关键字 searchKeyword。
示例代码
完整的 SearchComponent 代码如下所示：
-- -------------------- ---- -------
------ - ---------- ------- ------------ - ---- ----------------
------------
--------- -------------
--------- -
------ ----------- ---------------------------
-------------------------------------
-
--
------ ----- --------------- -
-- ---- ------------ --
---------
------ - --- -----------------------
------------- - ---
-完整的 ListComponent 代码如下所示：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- ----- - ----------------------
------------- - ------------
-----
-----
-
--
------ ----- ------------- -
-- --- --------------- ----------
--------
------------- - ---
-- -----------
----- - -
- ----- ----- ---- -- --
- ----- ----- ---- -- --
- ----- ----- ---- -- --
- ----- ----- ---- -- --
--
-总结
通过这篇文章的学习，我们了解了如何在 Angular 中优雅地实现搜索框。我们需要使用 FormsModule 模块来实现双向绑定，使用 EventEmitter 来发送搜索关键字，使用 Pipe 来对数据进行过滤操作。这些技术都是 Angular 开发中非常常用的技术，相信这篇文章可以帮助大家更好地掌握它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457a4a4968c7c53b0a47928