在使用 Angular2 开发前端应用过程中，我们经常需要使用到选项卡组件。而一个好用的选项卡组件可以帮助我们高效地实现这一需求。
这时候，我们可以使用一个名为 angularjs2-tabs 的 npm 包来实现选项卡组件。本文将详细介绍如何使用该包。
安装
在使用该包之前，先在您的项目中安装 angularjs2-tabs。
可以使用以下命令：
npm i angularjs2-tabs --save
这将会将该包添加到您的项目中。
使用
- 引入模块
在您的模块文件中引入该模块。
-- -------------------- ---- -------
------ - ---------- - ---- ------------------
-----------
-------- -
---
----------
--
---
--
------ ----- --------- - -- 使用组件
在您的组件中使用 tabs 组件。
<tabs> <tab tabTitle="Tab 1">Tab 1 Content</tab> <tab tabTitle="Tab 2">Tab 2 Content</tab> <tab tabTitle="Tab 3">Tab 3 Content</tab> </tabs>
以上代码定义了三个选项卡，每个选项卡都有一个标题和对应的内容。也可以在一个 tab 中使用 *ngFor 语句进行循环。
<tabs>
<tab *ngFor="let item of items" [tabTitle]="item.title">{{ item.content }}</tab>
</tabs>- 自定义选项卡标题
如果想要自定义选项卡标题的样式，可以在 TabsModule 模块中使用 TabTitleDirective。
-- -------------------- ---- -------
------ - ----------------- - ---- ------------------
-----------
------------- -
---
-----------------
--
---
--
------ ----- ---------- - -使用 TabTitleDirective 可以自定义一个标题的样式。
<tabs>
<tab>
<ng-template tabTitle>
<span class="custom-title">Custom title</span>
</ng-template>
Tab Content
</tab>
</tabs>示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------------
--------- -
------
---- ------------- ------ - -------------
---- ------------- ------ - -------------
---- ------------- ------ - -------------
-------
-
--
------ ----- ------------- -
----- - -
- ------ ---- --- -------- ---- - -------- --
- ------ ---- --- -------- ---- - -------- --
- ------ ---- --- -------- ---- - -------- -
--
-<tabs>
<tab *ngFor="let item of items" [tabTitle]="item.title">{{ item.content }}</tab>
</tabs>-- -------------------- ---- -------
------ - ----------- ----------------- - ---- ------------------
-----------
-------- -
---
----------
--
------------- -
---
-----------------
--
---
--
------ ----- ---------- - -<tabs>
<tab>
<ng-template tabTitle>
<span class="custom-title">Custom title</span>
</ng-template>
Tab Content
</tab>
</tabs>总结
通过本文的介绍，相信您已经对 angularjs2-tabs 包有了一定的认识，并学会了如何正确地使用它。选项卡是我们在前端应用中经常会用到的组件，希望本文能给您带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553d981e8991b448d125e