在 Angular 中，路由导航是非常重要的一部分。它可以让我们通过 URL 来访问不同的页面，并且可以在页面之间传递参数。本文将介绍如何在 Angular 中实现路由导航和传递参数，并提供示例代码和指导意义。
路由导航
在 Angular 中，我们可以使用 Angular 路由器来实现路由导航。要使用 Angular 路由器，我们需要先在 app.module.ts 中导入 RouterModule，并在 imports 数组中添加 RouterModule.forRoot() 方法。例如：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ----- ------- ------ - - -- ---- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
接下来，我们可以在 app.component.html 中添加一个 router-outlet 标签，它将会显示我们定义的路由组件。例如：
<router-outlet></router-outlet>
现在，我们可以开始定义路由了。在 routes 数组中，我们可以定义路由的路径和对应的组件。例如：
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: '**', component: PageNotFoundComponent }
];在上面的代码中，我们定义了四个路由。当路径为 ''，即默认路径时，会显示 HomeComponent 组件。当路径为 'about' 时，会显示 AboutComponent 组件。当路径为 'contact' 时，会显示 ContactComponent 组件。当路径不匹配任何一个路由时，会显示 PageNotFoundComponent 组件。
现在我们已经完成了路由的定义，接下来让我们来实现页面跳转和传递参数。
页面跳转
在 Angular 中，我们可以使用 routerLink 指令来实现页面跳转。它会自动将路由路径转换为一个链接，并且可以在 HTML 中使用。例如：
<a routerLink="/">Home</a> <a routerLink="/about">About</a> <a routerLink="/contact">Contact</a>
在上面的代码中，我们使用 routerLink 指令来定义了三个链接。当点击这些链接时，Angular 路由器会自动导航到对应的路由路径。
除了使用 routerLink 指令，我们也可以使用 Router 服务来实现页面跳转。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -----------
--------- -
------- ------------------------ -- --------------
-
--
------ ----- ------------- -
------------------- ------- ------- --
----------- -
---------------------------------
-
-在上面的代码中，我们在 HomeComponent 组件中使用 Router 服务来实现页面跳转。当点击按钮时，会调用 goToAbout() 方法，并且使用 this.router.navigate() 方法来导航到 '/about' 路由路径。
传递参数
在 Angular 中，我们可以在路由路径中传递参数。例如：
const routes: Routes = [
{ path: 'user/:id', component: UserComponent }
];在上面的代码中，我们定义了一个路由路径 '/user/:id'，其中 :id 是一个参数，它可以通过 ActivatedRoute 服务来获取。例如：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -----------
--------- -
------- --- -- ------ ------
-
--
------ ----- ------------- ---------- ------ -
------- -------
------------------- ------ --------------- --
---------- -
----------- - ---------------------------------------
-
-在上面的代码中，我们在 UserComponent 组件中使用 ActivatedRoute 服务来获取路由参数。在 ngOnInit() 方法中，我们使用 this.route.snapshot.paramMap.get() 方法来获取路由参数，并将其赋值给 userId 变量。
除了使用 ActivatedRoute 服务，我们也可以使用 Router 服务来传递参数。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -----------
--------- -
------- ----------------------- -- -------------
-
--
------ ----- ------------- -
------------------- ------- ------- --
---------- -
------------------------------ --------
-
-在上面的代码中，我们在 HomeComponent 组件中使用 Router 服务来传递参数。当点击按钮时，会调用 goToUser() 方法，并且使用 this.router.navigate() 方法来导航到 '/user/123' 路由路径。
总结
在本文中，我们介绍了如何在 Angular 中实现路由导航和传递参数。通过使用 Angular 路由器、routerLink 指令、Router 服务和 ActivatedRoute 服务，我们可以轻松地实现页面跳转和传递参数。希望本文能够对你有所帮助。如果你有任何问题或建议，请随时在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513952d95b1f8cacdbfd505