angular路由参数传递

本文介绍了在AngularJS App项目中如何进行页面间参数传递,特别是通过路由进行简单参数传递的方法。通过在app.js中配置ui-router,创建send.html和receiver.html两个界面,演示了如何从send.html向receiver.html传递输入框数据。接收参数时,利用$stateParams获取路由中的参数,若参数过多,可考虑使用Json字符串传递并解析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       最近在做一些angularJs的一个App项目,遇到关于页面间参数传递的一些问题,angularJs的参数传递可以有很多方式,例如用Factory,基于factory和$rootScope.$broadcast()的传参, localStorage或sessionStorage传参等等,但是简单的界面传参我们使用路由传递非常方便。

    在AngularJS的app.js中用ui-router定义路由,现在有两个界面,一个传递参数的界面send.html,一个接收传递参数的界面receiver.html,当我们点击传递界面的按钮时将输入框中输入的数据传递到接收界面。

 

传递参数界面

 

接收参数界面

 

	$scope.Onclick = function() {
		$state.go('app.receiver', {
			value:$scope.PageData.Intent
		}, {
			reload : true
		});
	}

使用$stateParams接收参数

	console.log($stateParams);
	$scope.PageData = {
			ReceivValue:$stateParams.value
	}

路由配置(url:'/页面名称/:参数')

 

 

.state('app.send', {
				url : '/send',
				views : {
					'menuContent' : {
						templateUrl : 'templates/send.html',
						controller : 'SendCtrl'
					}
				}
			}).state('app.receiver', {
				url : '/receiver/:value',
				views : {
					'menuContent' : {
						templateUrl : 'templates/receiver.html',
						controller : 'ReceiverCtrl'
					}
				}
			})

如果传递参数过多,也要使用这种办法进行传递,我们可以采用Json字符串进行传递,到目标界面进行解析就可以了

 

 

		//将对象转化为字符串
		var jsonString = angular.toJson(item)
		$state.go('tab.frmordetransportmessage', {
			jsonString : jsonString
		}, {
			reload : true
		});
	

接收JsonString字符串并进行解析

	//url参数对象
	$scope.V_SaleConsignPlanBill=null;
	// 获取上个界面传递的数据,并进行解析
	if ($stateParams.jsonString != '') {
		$scope.V_SaleConsignPlanBill = angular.fromJson($stateParams.jsonString);
	}

 

 

 

 

Angular中实现带参数的路由跳转主要分为两种情况:一种是通过路径参数(Path Parameters),另一种是通过查询参数(Query Parameters)。以下是详细的实现方法和示例代码。 --- ### 一、使用路径参数(Path Parameters) #### 1. 配置路由 定义带有占位符的路由路径,用于接收动态参数[^4]。 ```typescript const routes: Routes = [ { path: 'hero/:id', component: HeroDetailComponent }, // :id 是路径参数占位符 ]; ``` #### 2. 跳转到目标路由 利用`Router.navigate`方法进行跳转,并传递路径参数。 ```typescript import { Router } from '@angular/router'; constructor(private router: Router) {} navigateToHero(id: string): void { this.router.navigate(['/hero', id]); // 参数作为数组的一部分传递 } ``` #### 3. 在目标组件中读取路径参数 通过`ActivatedRoute`服务获取路径参数。 ```typescript import { ActivatedRoute } from '@angular/router'; constructor(private route: ActivatedRoute) {} ngOnInit(): void { this.route.paramMap.subscribe(params => { const heroId = params.get('id'); // 获取路径参数 id 的值 console.log(`英雄ID: ${heroId}`); }); } ``` --- ### 二、使用查询参数(Query Parameters) #### 1. 配置路由 无需特殊配置,任何路由都可以接受查询参数。 #### 2. 带查询参数跳转 同样使用`Router.navigate`方法,但需额外指定`queryParams`选项。 ```typescript this.router.navigate( ['/search'], { queryParams: { category: 'electronics', sort: 'asc' } } // 查询参数对象 ); ``` #### 3. 在目标组件中读取查询参数 通过`ActivatedRoute`的`queryParams`属性订阅查询参数的变化。 ```typescript this.route.queryParamMap.subscribe(paramMap => { const category = paramMap.get('category'); // 获取 category 查询参数 const sort = paramMap.get('sort'); // 获取 sort 查询参数 console.log(`分类: ${category}, 排序方式: ${sort}`); }); ``` --- ### 三、注意事项 - **路径参数 vs 查询参数** - 路径参数通常用于唯一标识资源(如 `/hero/123` 表示第123号英雄)[^4]。 - 查询参数适合携带附加信息(如分页、筛选条件等)。 - **导航失败处理** 如果目标路由不存在或参数不合法,可以捕获错误并提供友好的提示。 - **性能优化** 使用`paramMap`和`queryParamMap`时应考虑解绑订阅以防内存泄漏。 --- ### 示例总结 以下是一个完整的例子,展示如何结合路径参数和查询参数进行路由跳转: ```typescript // 导航逻辑 this.router.navigate(['/product', productId], { queryParams: { color: 'red', size: 'M' } }); // 目标组件中读取参数 ngOnInit(): void { this.route.paramMap.subscribe(params => { const productId = params.get('productId'); console.log(`产品ID: ${productId}`); }); this.route.queryParamMap.subscribe(queryParams => { const color = queryParams.get('color'); const size = queryParams.get('size'); console.log(`颜色: ${color}, 尺寸: ${size}`); }); } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值