介绍
Angular2-rotas是一个简单易用的Angular2路由管理器。它允许您在应用程序中创建和管理路由，使您的应用程序具有良好的组织结构和易于维护的代码。
安装
您可以使用 npm 命令来安装 angular2-rotas，只需在你的项目根目录下输入：
npm install angular2-rotas --save
使用
添加模块依赖
要使用 angular2-rotas，我们需要在我们的模块中添加依赖。打开您的 Angular2 Module 文件，添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
------ -------- ---- -------
-----------
------
-------- -
---------
------
--
------
--
------ ----- --------- - -创建路由数组
创建您的路由数组。打开您的路由文件，添加以下代码：
import { ......} from ......;
export const routes: RouterConfig = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
......
];路由数组中，每一个对象代表一个路由路径，其中我们需要满足一下三个要点：
- path —— 表示路由的 URL 地址。
- component —— 路由对应的组件名称。
- pathMatch-设置路由路径的匹配规则，可以设置为'prefix'或'full'，用于匹配路由路径。
在 Component 中加入 Router
当路由导航触发时，您需要使用 router 对象来加载组件。为了使用该路由对象，您需要导入该对象：
import { Router } from '@angular/router'
接下来要注入 Router 对象。在组件构造函数中加入以下代码：
constructor(private router: Router) { }
在构造函数中，我们注入了路由对象，现在我们可以在组件中使用路由对象进行路由导航。
触发路由导航
使用以下代码从一个组件导航到另一个组件 中：
this.router.navigate(['/path']);
例如，在您的应用中，在 User 组件中从列表页导航到编辑页：
this.router.navigate(['/user/edit', id]);
在新窗口中打开链接：
window.open('/path', '_blank');
路由链接
显示路由链接，只需使用以下代码：
<a [routerLink]="['/path']">Link Text</a> <a [routerLink]="['/user/edit', id]">Link Text</a>
当用户单击该链接时，路由会自动导航到相应的组件。
示例代码
以下是一个用 Angular2-rotas 实现的简单路由示例代码：
app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- -----------------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - ------------- - ---- ------------------------
------ - ----------------- - ---- -----------------------------
------ - ----------------- - ---- -----------------------------
------ - ------------ - ---- ----------------------
-----------
------------- -
-------------
--------------
--------------
------------------
------------------
------------
--
-------- -
--------------
-------------------
----------------------
- ----- ------- ---------- ------------- --
- ----- ------- ---------- --------------
--------- -
- ----- --- ---------- ----------------- --
- ----- ----------- ---------- ----------------- -
-
--
- ----- --- ----------- -------- ---------- ------ --
- ----- ----- ----------- -------- ---------- ------ -
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -user.component.html
<nav> <a routerLink="/user">List</a> | <a [routerLink]="['/user/edit', 0]">New</a> </nav> <router-outlet></router-outlet>
list.component.ts
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- ------------------
------ - ----------- - ---- ------------------
------ - ---- - ---- ----------------
------------
--------- ----------------
--------- -
-------
----
-----------
-------------
--------------
----------------
-----
--- ----------- ---- -- -------
--------------------
----------------------
-----------------------
----
------- -----------------------------------------
------- ---------------------------------------------
-----
-----
--------
--
------- ----
--
------ ----- ----------------- ---------- ------ -
------ -------
------------------- ------------ ------------ ------- ------- ------- - -
----------- ---- -
---------------------------
----------- -- ---------- - -------
-
------------ -------- ---- -
----------------------------------- -----
-
-------------- -------- ---- -
-------------------------------
-------- -- -
---------- - ---------------------- -- ------- --- ----
---
-
-edit.component.ts
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- ------- ------ - ---- ------------------
------ - ----------- - ---- ------------------
------ - ---- - ---- ----------------
------------
--------- ----------------
--------- -
-------- ---------
----- ----------------------
--------------------
------ ----------------------- ------------
---------------------
------ ------------------------ -------------
------- ---------------------------
------- ------------- --------------------------------------
-------
--
------- ----
--
------ ----- ----------------- ---------- ------ -
----- ---- - --- -------
------------
------- ------------ ------------
------- ------ ---------------
------- ------- ------
- - -
----------- ---- -
-----------------
------------------- ------- -- ----------------------------------------
--------------- -- -
-- ------ -
--------- - -----
- ---- -
--------------------------------
-
---
-
----------- ---- -
------------------------------------
-------- -- ---------------------------------
-
------------- ---- -
--------------------------------
-
-总结
Angular2-rotas 是一个非常方便的路由管理器，在增强您的 Angular2 应用程序中大有作为。希望这篇文章对您有所帮助，并且现在您能够使用 Angular2-rotas 轻松地实现路由导航。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567cf81e8991b448e4094