前言
在当今日益数字化的世界中，导航网站和应用程序已成为日常生活不可或缺的一部分。针对这个需求，@ngx-ui/navigation 包就应运而生了。该npm包提供了众多的选项，可以轻松地创建自定义导航菜单，从而为用户提供良好的导航体验。
本文将详细介绍如何使用@ngx-ui/navigation npm包，同时提供示例代码和指导让你更快速地学会使用该包。
安装和配置
安装@ngx-ui/navigation npm包可以使用以下的命令：
npm install @ngx-ui/navigation --save
在app.module.ts中导入该包及其所需的模块：
-- -------------------- ---- -------
------ - -------- - ---- -------------
------ - ---------------- - ---- ---------------------
-----------
-------- -
---------
----------------
--
---------- - ------------ -
--
------ ----- --------- --初始化
要使用@ngx-ui/navigation npm包提供的导航菜单，首先需要从导航模块中导入 NavigationService，并在组件的构造函数中创建实例。您可以使用 NavigationService 中提供的 addMenu()方法在组件内部添加导航菜单。
-- -------------------- ---- -------
------ - ----------------- - ---- ---------------------
------ ----- ------------ ---------- ------ -
------------------- ------------------- --------------------
-----------
---------------------------------
-
------ -----
----- -------
----- ---
--
-
------ -----
----- -----------
--------- -
-
------ ------
----- -----------
--
-
------ ------
----- -----------
--
-
------ ------
----- -----------
--
-
--
-
------ -------
----- -------
----- --------
-
---
-
-上面代码展示了如何使用 NavigationService 中的 addMenu() 方法添加导航菜单。该方法需要一个菜单项数组作为参数，该数组可以包含菜单标签、菜单图标以及链接等信息，以及需要子菜单的菜单。在示例中，我们添加了三个菜单项。第一个是“首页”，包含一个简单的链接，“产品”和“关于我们”菜单项包含子菜单。
绑定菜单
NavigationMenuComponent 是一个@ngx-ui/navigation npm包中提供的可重用组件，可用于在UI中展示导航菜单。在您的组件中，只需要使用 navigation-menu 组件将您添加的菜单绑定在一起，并使用 NavigationService 的 isReady 属性来检查导航菜单是否已经准备好显示。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ---------------------
------------
--------- -----------
--------- -
---------------- ------------------ -----------------------------------------------------
-------------------------------
--
------- -
-
----- -
-------- ---- --
-
-
-
--
------ ----- ------------ -
------------------ ------------------- ------------------ --
-上面的代码展示了如何将 NavigationMenuComponent 绑定到您的组件中，在其下面加入路由。如果 isReady 属性为 true，则您的导航菜单现在应该已经有机会展示出来了。
自定义样式
@ngx-ui/navigation npm包中的导航菜单具有独立的CSS样式，您可以根据自己的需求和喜好进行自定义。您可以使用 CSS 类或子组件选择器来增加或覆盖原始样式。
如果您需要覆盖@ngx-ui/navigation npm包中的样式，推荐您将其添加到 angular.json 中的 "styles" 数组中。这样就不需要更改导航菜单中的样式文件，则所有组件都将自动继承新的CSS样式定义。
"styles": [ "src/styles.scss", "./node_modules/@ngx-ui/navigation/lib/styles/navigation.scss" ],
示例代码
以下是一些使用@ngx-ui/navigation npm包创建的导航菜单的示例代码：
-- -------------------- ---- -------
------ - ----------------- - ---- ---------------------
------ ----- ------------ ---------- ------ -
------------------- ------------------- --------------------
-----------
---------------------------------
-
------ -----
----- -------
----- ---
--
-
------ -----
----- -----------
--------- -
-
------ ------
----- -----------
--
-
------ ------
----- -----------
--
-
------ ------
----- -----------
--
-
--
-
------ -------
----- -------
----- --------
-
---
-
-
------ - --------- - ---- ----------------
------ - ----------------- - ---- ---------------------
------------
--------- -----------
--------- -
---------------- ------------------ -----------------------------------------------------
-------------------------------
--
------- -
-
----- -
-------- ---- --
-
-
-
--
------ ----- ------------ -
------------------ ------------------- ------------------ --
-总结
使用@ngx-ui/navigation npm包可方便地创建功能强大又美观的导航菜单。不仅如此，该npm包还可以满足多种使用场景，非常适合各种项目和应用程序。您可以在了解了本文中提供的内容后，轻松自如地使用@ngx-ui/navigation npm包来构建自己的导航菜单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc526