在前端开发中，标签的使用是非常普遍的，而 angular-sliding-tags 就是一个方便快捷的 Angular 标签选择器。本篇文章将为大家介绍该包的安装以及使用方法，并提供相关示例代码，帮助大家快速上手。
安装
在 Angular 项目中使用 angular-sliding-tags 需要通过 npm 进行安装，可以使用如下的命令进行安装：
npm install angular-sliding-tags
使用
安装成功后，在需要使用的组件中添加依赖项：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------- -- -----
--
---------- ---
---------- --------------
--
------ ----- --------- - -接着，在 HTML 页面中使用 angular-sliding-tags：
<sliding-tags [tags]="['Tag1', 'Tag2', 'Tag3']" [(selectedTags)]="selectedTags" [showAllOption]="true"></sliding-tags>
好了，这就是最简单的使用方法了，看起来确实很简单。
接下来，让我们深入学习更多的使用方法。
基本使用
先来看看最基本的使用方式，只需为 sliding-tags 组件传递一个包含你需要的标签名的数组，即可渲染出一个标记选择器。
<sliding-tags [tags]="['Tag1', 'Tag2', 'Tag3']"></sliding-tags>
这里需要注意的是，如果您想立即开发和使用此包，请确保了解 Angular 元素选择器。
在代码中访问所选标签
在上一个代码示例中，我们仅仅在 HTML 中渲染了一个选择器，但是我们如何在 TypeScript 中获得所选标签呢？
通过将 selectedTags 绑定到 ngModel 上，可以将所选标签组件的值传递到变量 selectedTags 中：
<sliding-tags [tags]="['Tag1', 'Tag2', 'Tag3']" [(ngModel)]="selectedTags"></sliding-tags>
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ ---------- ------ - ------------- -------- - --- ------------- -- ----------- ---- -- -
现在，您可以在代码中访问所选标签了。
显示所有标签
有时候，我们希望在选择器的下拉列表中包含“显示所有标签”的选项。可以通过传递一个 showAllOption 参数来实现此目的：
<sliding-tags [tags]="['Tag1', 'Tag2', 'Tag3']" [showAllOption]="true" [(ngModel)]="selectedTags"></sliding-tags>
更改样式
angular-sliding-tags 允许您为数值调整颜色和样式。使用 itemBackgroundColor 和 textColor 属性即可：
<sliding-tags [tags]="['Tag1', 'Tag2', 'Tag3']"
[showAllOption]="true"
[(ngModel)]="selectedTags"
[itemBackgroundColor]="'#ff0000'"
[textColor]="'#0000ff'">
</sliding-tags>完整示例
下面是一个完整示例，供大家参考：
<sliding-tags [tags]="['Tag1', 'Tag2', 'Tag3']"
[(selectedTags)]="selectedTags"
[showAllOption]="true"
[itemBackgroundColor]="'#ff0000'"
[textColor]="'#0000ff'">
</sliding-tags>
{{selectedTags}}-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ ---------- ------ - ------------- -------- - --- ------------- -- ----------- ---- -- -
小结
通过本篇文章，我们详细介绍了如何安装和使用 angular-sliding-tags，同时提供了相关示例代码。希望这篇文章能够对您做前端开发时使用标签选择器有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005676d81e8991b448e3db2