介绍
ngx-router-tabs 是一个 Angular 的插件，可以帮助我们在应用程序中创建 tab 界面。它支持自定义 tab 标题和内容，并且可以通过路由控制 tab 的显示。
在项目中使用 ngx-router-tabs 可以让用户更好地掌控应用程序的流程和状态。它不仅可以改善用户的体验，还可以提高应用程序的可维护性。
安装
在使用 ngx-router-tabs 之前，需要先安装它。
npm install --save ngx-router-tabs
这条命令会自动安装 ngx-router-tabs 并将它添加到你的 package.json 文件中。
使用方法
1. 引入模块
在使用 ngx-router-tabs 之前，需要先将它导入到你的模块中：
import { NgModule } from '@angular/core';
import { NgxRouterTabsModule } from 'ngx-router-tabs';
@NgModule({
imports: [NgxRouterTabsModule],
})
export class AppModule {}2. 添加路由
ngx-router-tabs 的最常见的用法是根据路由来动态地显示 tab。
因此，我们需要在路由配置中添加 tab 的定义：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - --------------- - ---- ----------------------
----- ------- ------ - -
-
----- ---
---------- ----------------
--------- -
- ----- --- ----------- ------- ---------- ------ --
- ----- ------- ------------- -- -- ----------------------------------- -- -------------- ----- - ------ ---- -- - --
- ----- ------- ------------- -- -- ----------------------------------- -- -------------- ----- - ------ ---- -- - --
- ----- ------- ------------- -- -- ----------------------------------- -- -------------- ----- - ------ ---- -- - --
--
--
--
-----------
-------- --------------------------------
-------- ---------------
--
------ ----- ------------------- --上面的例子中，我们创建了一个组件 MyTabsComponent，并在路由配置中将它作为父路由。
在 MyTabsComponent 的模板中，我们可以通过 ngx-router-tabs 来动态地显示子路由的内容：
<ngx-router-tabs [controls]="[{path: 'tab1'} , {path: 'tab2'}, {path: 'tab3'}]">
<ng-template tabTitle let-tab>
{{ tab.data.title }}
</ng-template>
<ng-template tabContent let-tab>
<router-outlet></router-outlet>
</ng-template>
</ngx-router-tabs>这个例子中，我们通过 controls 属性来指定了需要显示的子路由。同时，我们还指定了两个模板用来分别显示 tab 的标题和内容。
3. 自定义样式
我们可以通过 CSS 自定义 ngx-router-tabs 的样式。
例如，我们可以通过以下的代码来添加一个自定义样式：
-- -------------------- ---- -------
--------------- -
--------------- -----
------------------- -----
-------------------------- -
-------- ---- -----
-------------- --
-------------- --- ----- -------------------
----------------------------------- -
----------------- ---------------
------- -----
-
-
------------------------- -
-------- -----
------- --- ----- -------------------
----------- -----
-
-上述代码中，我们使用了 Sass 来定义了一些变量，以便我们在后面的代码中可以方便地修改。
然后，我们使用这些变量来定义了样式，从而让 ngx-router-tabs 的外观与我们的项目风格相符。
4. 更多用法
在 ngx-router-tabs 的 Github 主页中，还有更多的用法和示例供我们参考：
https://github.com/Enngage/ngx-router-tabs
结论
ngx-router-tabs 是一个非常实用的 Angular 插件，它可以让我们轻松地创建 tab 界面，并通过路由来动态地显示内容。
在我们的项目中使用 ngx-router-tabs 不仅可以改善用户的体验，还可以提高应用程序的可维护性。因此，我相信它会成为你日常开发中的常用工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f9d81e8991b448dcf1c