在 Angular 4 中，路由是管理不同视图之间导航的重要部分。通过路由，我们可以实现页面之间的切换，实现单页应用的效果。在本章节中，我们将深入讨论 Angular 4 中的路由相关内容。
路由基础
在 Angular 4 中，路由模块被单独提取出来，我们需要通过 @angular/router 模块来使用路由功能。首先，我们需要在 app.module.ts 中引入 RouterModule 模块，并在 imports 数组中加入 RouterModule.forRoot([])。
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
-----------
-------- -
------------------------
--
---
--
------ ----- --------- - -路由配置
在 Angular 4 中，我们可以通过 RouterModule.forRoot([]) 中的数组来配置路由。每个路由都是一个对象，包含 path 和 component 属性，分别表示路由路径和对应的组件。
-- -------------------- ---- -------
----- ------- ------ - -
- ----- ------- ---------- ------------- --
- ----- -------- ---------- -------------- -
--
-----------
-------- -
----------------------------
--
---
--
------ ----- --------- - -路由导航
在模板中，我们可以使用 routerLink 指令来实现路由导航。例如，我们可以在导航栏中添加链接：
<nav> <a routerLink="/home">Home</a> <a routerLink="/about">About</a> </nav>
路由参数
在 Angular 4 中，我们可以通过路由参数来传递数据。在路由路径中使用冒号表示参数，然后在组件中通过 ActivatedRoute 服务来获取参数值。
-- -------------------- ---- -------
----- ------- ------ - -
- ----- ----------- ---------- ------------- -
--
------------
---
--
------ ----- ------------- -
------------------- ------ --------------- -
---------------------------------- -- -
--------------------------
---
-
-嵌套路由
在 Angular 4 中，我们可以实现嵌套路由，即在一个组件中嵌套另一个组件的路由。通过在父路由中定义子路由，我们可以实现多层级路由。
-- -------------------- ---- -------
----- ------- ------ - -
-
----- ------------
---------- -------------------
--------- -
- ----- ----------- ---------- ----------------- --
- ----- ---------- ---------- ---------------- -
-
-
--路由守卫
在 Angular 4 中，我们可以使用路由守卫来控制路由的访问权限。通过实现 CanActivate, CanDeactivate, CanLoad 等接口，我们可以在路由跳转前执行一些逻辑。
-- -------------------- ---- -------
-------------
------ ----- --------- ---------- ----------- -
------------
------ -----------------------
------ -------------------
-- ------------------- - ---------------- - ------- -
-- ------------ -
------ -----
- ---- -
---------------------------------
------ ------
-
-
-以上就是关于 Angular 4 中路由的基础内容，希望对你有所帮助。在接下来的章节中，我们将继续深入探讨 Angular 4 的其他特性。