在 Angular 应用程序中，我们经常需要获取和传递参数。本文将介绍如何在 Angular 应用程序中获取和传递参数，并通过示例代码演示其实现过程。
获取参数
在 Angular 应用程序中，有许多不同的方式可以获取参数。以下是几种常用的方式：
1. 通过 URL 获取参数
我们可以通过在 URL 上添加参数的方式来获取参数。例如，如果我们想要获取一个名为 "id" 的参数，我们可以通过以下方式获取：
-- -------------------- ---- ------- ------ - -------------- - ---- ------------------ ------------------- ------ --------------- -- ---------- - --------------------------------------- -- - ----- -- - ------------- ---------------- --- -展开代码
2. 在路由路径中获取参数
我们还可以在路由路径中指定参数，然后通过 ActivatedRoute 服务来访问它们。例如，假设我们在路由器中定义了以下路由：
{ path: 'users/:userId', component: UserComponent }
我们可以通过以下方法获取 URL 中的参数：
-- -------------------- ---- ------- ------ - -------------- - ---- ------------------ ------------------- ------ --------------- -- ---------- - ---------------------------------- -- - ----- ------ - ----------------- -------------------- --- -展开代码
3. 在组件中获取参数
会用到 @Input() 装饰器，使用方式如下。
假设我们有一个名为 "UserComponent" 的组件，我们可以在父组件中通过以下方式传递参数：
<app-user [userId]="123"></app-user>
在 UserComponent 中，我们可以使用 @Input 装饰器来获取传递过来的参数：
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- ----------- ------------ ------------------------ ---------- ------------------------ -- ------ ----- ------------- - -------- ------- ------- -展开代码
传递参数
在 Angular 应用程序中，有许多不同的方式可以传递参数。以下是几种常用的方式：
1. 在 URL 上传递参数
我们可以通过在 URL 上添加参数的方式来传递参数。例如，如果我们想要传递一个名为 "id" 的参数，我们可以使用以下代码：
import { Router } from '@angular/router'; constructor(private router: Router) {} submit(id: number) { this.router.navigate(['/result'], { queryParams: { id: id } }); }
2. 在路由路径中传递参数
我们还可以在路由路径中指定参数，然后通过 Router 服务来访问它们。例如，假设我们在路由器中定义了以下路由：
{ path: 'users/:userId', component: UserComponent }
我们可以使用以下代码来传递参数：
import { Router } from '@angular/router'; constructor(private router: Router) {} submit(userId: number) { this.router.navigate(['/users', userId]); }
3. 在组件之间传递参数
与获取参数类似，我们也可以通过 @Input() 装饰器来传递参数。在父组件中，我们可以使用以下代码传递参数：
<app-user [userId]="123"></app-user>
在 UserComponent 中，我们可以使用 @Input 装饰器来获取传递过来的参数，然后通过 EventEmitter 和 @Output 装饰器来向父组件发送数据：
-- -------------------- ---- ------- ------ - ---------- ------ ------- ------------ - ---- ---------------- ------------ --------- ----------- ------------ ------------------------ ---------- ------------------------ -- ------ ----- ------------- - -------- ------- ------- --------- ------------ - --- ----------------------- ---------- - ------------------------------------ - -展开代码
在父组件中，我们可以监听 userSelected 事件，并获取传递过来的参数：
<app-user [userId]="123" (userSelected)="onUserSelected($event)"></app-user>
onUserSelected(userId: number) { console.log(userId); }
总结
在 Angular 应用程序中，获取和传递参数是非常常见的操作，因此我们需要掌握各种不同的技巧和方法。本文介绍了几种获取和传递参数的方式，包括从 URL、路由路径和组件中获取和传递参数，并提供了相应的示例代码，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475a280968c7c53b02a5615
