在前端开发中，跳转页面是必不可少的功能。ng-router 可以帮助我们实现 Angular 应用中的路由导航，且具有多种类型路由的支持。而本文要介绍的是 npm 包 @danbucholtz/ng-router，它是 ng-router 的一个补充，提供了更多的功能和灵活性。
安装
首先，我们需要安装 @danbucholtz/ng-router：
npm install @danbucholtz/ng-router
然后在 app.module.ts 文件中导入 NgRouterModule 并添加到 imports 数组中：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- ------------------------- ----------- -------- --------------- ---------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- --
使用
接下来我们来看看如何使用 @danbucholtz/ng-router。首先在 app.component.ts 文件中注册路由：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- -------------------------
------------
--------- ---------
--------- -
-----
-----
-- ---------------------------------
-- -----------------------------------
------
-------------------------------
------
-
--
------ ----- ------------ -
------- ----------------- - -
- ----- ------- ----- ---- ---------- ------------- --
- ----- -------- ----- --------- ---------- -------------- -
--
-此时我们需要在 app.module.ts 中导入 HomeComponent 和 AboutComponent。
在以上代码中，我们定义了两个路由 Home 和 About，Home 的路径为 '/'，About 的路径为 '/about'。除了 component，还可以定义 canActivate、canActivateChild、canDeactivate 和 data 等路由属性。具体可查看 @danbucholtz/ng-router 的官方文档。
接下来，在 AppComponent 类中实现 NgOnInit 接口，启用路由：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- - ---- -------------------------
------------
--------- ---------
--------- -
-----
-----
-- ---------------------------------
-- -----------------------------------
------
-------------------------------
------
-
--
------ ----- ------------ ---------- ------ -
------- ----------------- - -
- ----- ------- ----- ---- ---------- ------------- --
- ----- -------- ----- --------- ---------- -------------- -
--
---------- -
---------------------------------
-
-以上代码中，我们通过调用 NgRouter 的 initialize 方法启动了路由。
现在我们已经可以使用 @danbucholtz/ng-router 进行路由跳转了。在 HTML 模板中可以使用 routerLink 来跳转，如上面的例子中的代码。在 TypeScript 中可以使用 RouterService 的 navigate 方法：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
--------------
------ ----- ------------- -
------------------- ------- -------------- --
----------- -
--------------------------------
-
-这里的 RouterService 可以在构造函数中获取，并通过 navigate 方法来进行路由跳转。
总结
@danbucholtz/ng-router 为我们提供了更多路由管理的功能和灵活性，能够帮助我们更好的构建 Angular 应用，同时提升开发效率。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005749981e8991b448ea19e