当我们在开发 Angular 前端应用时，我们经常需要在页面中添加导航栏。而 Angular 自带的 router-outlet 并没有提供方便的导航栏组件供我们使用，这就需要借助第三方库来实现导航栏的功能。而其中一款非常优秀的导航栏组件就是 angular-navigation。
angular-navigation 是一个基于 Angular 框架开发的导航栏组件，提供了一些非常便利的功能，如可配置的导航菜单、可定制的主题样式、导航历史记录、动态路由等。下面，让我们通过本篇文章来学习如何使用 angular-navigation 进行前端开发。
安装和引入
使用 angular-navigation 首先需要在项目中安装其 npm 包。可以通过以下命令来完成：
npm install angular-navigation --save
安装完成后，在 Angular 项目的 app.module.ts 文件中引入 angular-navigation：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- --------------------- -- -- ------------------ --
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
--------------------------- -- -- ---------------- --- --------- --
--
---------- ---------------
--
------ ----- --------- --注意，还需要调用 NavigationModule 的 forRoot() 方法来初始化导航功能。如果在多个模块中都需要使用 angular-navigation，则只需要在根模块（如 app.module.ts）中调用一次 forRoot() 方法即可。
创建导航
在项目中添加导航栏前，我们需要先创建导航结构和数据。在 app.component.ts 文件中定义一个导航栏的数据结构：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------- -- -- -------------- --
------------
--------- -----------
--------- -
--------------- --------------------------------- ---- -- ---------------- -- ---
-------------------------------
--
--
------ ----- ------------ -
------ ---------------- - -
-
------ -------
------ ----
--
-
------ --------
------ ---------
--
-
------ ----------
------ -----------
--
--
-在导航栏中，我们需要为每个菜单项指定一个路由（route），这样当用户点击菜单项时，就可以自动跳转到对应的路由界面。
以上代码中的 app-navigation 组件就是 angular-navigation 提供的导航栏组件。要想使用该组件，还需要在 app.component.ts 文中导入该组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ---------------------
------ - ------------------- - ---- --------------------- -- -- ------------------- --
------------
--------- -----------
--------- -
--------------- ---------------------------------
-------------------------------
--
---------------- ---------------------- -- ----- --------------- -
--
------ ----- ------------ -
-- ---
-定制样式
一般情况下，我们需要为导航栏添加定制化的样式，以适应不同的项目需求。为了实现该目标，angular-navigation 提供了一些可配置的样式选项。下面是一个示例代码，用于配置导航栏的样式、色彩和布局：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ---------------------
------------
--------- -----------
--------- -
--------------- --------------- ----------------------------------- ---- -- ------ -- ---
-------------------------------
--
--
------ ----- ------------ -
------ ---------------- - -
-- ---
--
------ - -
-- -----------------
------ -
-------- ----------
---------- --------
-------------- ----------
---------------- ----------
--
------- -------------
--------------- -------
--
-以上示例代码，使用了 config 参数来配置导航栏的样式、色彩和布局。可以自由调整 bgColor、fontColor、activeBgColor、activeFontColor、layout 和 navigationType 等配置信息，以达到导航栏的定制化要求。
导航历史记录
当用户在页面中通过导航栏切换路由时，我们通常需要记录用户的历史浏览记录，以便用户可以使用浏览器的“后退”功能返回上一页。使用 angular-navigation 可以非常简单地实现这个功能。在 app.component.ts 文件中既可启用导航历史记录功能：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ---------------------
------ - ------ - ---- ------------------
------ - ------------------- - ---- ---------------------
------------
--------- -----------
--------- -
---------------
---------------
-----------------
------------------------------- ---- -- ------ -- ---
------------------
-------------------------------
--
--
------ ----- ------------ -
------ ---------------- - -
-- ---
--
------ - -
-- ---
------- -----------
--------------- ------------
------------- ----- -- --------
--
------------------- ------- ------- --
------------------- -------- ---- -
------------------------------ -- ------
-
-在代码中，我们首先通过 this.config 的 hasBackArrow 属性开启了导航历史记录功能。然后再在 app-navigation 组件的 select 事件里处理路由跳转的逻辑，即使用 this.router.navigate([route]) 方法进行页面跳转。
以上，我们已经讲解了 angular-navigation 基础的使用方法，包括安装、引入、创建导航、定制样式和导航历史记录等方面。在实际的开发中，我们可以根据业务需求，进一步掌握 angular-navigation 的丰富功能，来开发出更加强大、灵活的导航栏组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580581e8991b448d5296