AngularJs通过路由传参解决多个页面资源浪费问题

Posted 2020-10-23 热爱世界的liang

在实际开发中会遇到很多类似模块界面大体都一致只是极少的细节部分不一样，这时不管是在html页面还有js及数据交互的时候我们就没必要因为这些不同的页面分出不同的文件，这样很浪费内存及效率，于是我在开发中想到一种办法：通过ng路由传递参数使其多个页面都可以使用一套总体的文件来管理编辑。这样既提高开发效率也节省资源内存。

首先在列表数据中，链接设置跳转路由及参数，多个参数可以使用对象方法传递，这里我使用对象传递两个参数一个是跳转过去的详情查询ID，另一个就是页面的标识符：

1 <div class="col-md-3 itemPr">
2 　　<a target="_blank" ui-sref="bargainDetail({id:b.id,appDetail:‘RENTDetail‘})">
3    　　<h4>产品总价: <span ng-bind="b.realReceivable"></span>元</h4>
4   　　 <h4 ng-if="b.received">已收金额: <span ng-bind="b.received"></span>元</h4>
5  　</a>
6 </div>

然后设置此路由并接受路由中的参数：

 1 // 产品公共详情
 2 .state(‘residenceResourceDetails‘,{
 3 　　url:‘/residenceResourceDetails/:id/:appDetail‘,
 4    views:{
 5    　　‘ts-view‘:{
 6       　　controller:‘residenceResourceDetailsCtrl‘,
 7          templateUrl:‘tpl/resourceRent/residenceResourceDetails.html‘
 8    　　}
 9 　　}
10 })

接下来在对应中的控制器中接受路由传递的参数并做以下设置：

 1 // 接口设置
 2 if($stateParams.appDetail===‘RENTDetail‘){ // 示例1
 3     $scope.xxxxxionBTN=false; // XXXXX 显示隐藏
 4     $scope.xxxxxionPAGEURL=‘xxxxxList‘; // XXXXX 接口地址
 5     $scope.xxxxxmissionURL=‘xxxxxission‘; // XXXXX 接口地址
 6     $scope.xxxxxommissionURL=‘xxxxxission‘; // XXXXX 接口地址
 7     $scope.xxxxxtCommissionConfirmTimeURL=‘xxxxxfirmTime‘; // XXXXX 接口地址
 8     $scope.xxxxxtCommissionAuditTimeURL=‘xxxxxditTime‘; // XXXXX 接口地址
 9     $scope.xxxxxinURL=‘xxxxxondHouse‘; // XXXXX  接口地址
10 
11 }else if($stateParams.appDetail===‘SELLDetail‘){ // 示例2
12     $scope.xxxxxonBTN=true; // XXXXX 显示隐藏
13     $scope.xxxxxPAGEURL=‘xxxxxsionList‘; // XXXXX 接口地址
14     $scope.xxxxxssionURL=‘xxxxxmission‘; // XXXXX 接口地址
15     $scope.xxxxxsionURL=‘xxxxxssion‘; // XXXXX 接口地址
16     $scope.xxxxxfirmTimeURL=‘xxxxxfirmTime‘; // XXXXX 接口地址
17     $scope.xxxxxonAuditTimeURL=‘xxxxxAuditTime‘; // XXXXX 接口地址
18     $scope.xxxxxinURL=‘xxxxxdHouse‘; // XXXXX 接口地址
19 
20 }else if($stateParams.appDetail===‘NEWDetail‘){ // 示例3
21     $scope.xxxxxPAGEURL=‘xxxxxsionList‘; // XXXXX 接口地址
22     $scope.xxxxxRL=‘xxxxxuse‘; // XXXXX 接口地址
23     $scope.xxxxxionURL=‘xxxxxission‘; // XXXXX 接口地址
24     $scope.xxxxxmmissionURL=‘xxxxxssion‘; // XXXXX 接口地址
25     $scope.xxxxxrmTimeURL=‘xxxxxfirmTime‘; // XXXXX 接口地址
26     $scope.xxxxxditTimeURL=‘xxxxxitTime‘; // XXXXX 接口地址
27 }

以上是在一个公共页面中，路由分别传递过来的参数，通过传递过来的参数我们在控制器中注入 $stateParams 服务来接收参数，上面的每个分支判断中都是一个页面的数据接口及哪些按钮展示哪些按钮不展示，这样一来在一个公共的html页面中展示通过模块的链接控制他的链接显示隐藏，在通过列表中的链接控制详情中的数据显示，通过这些操作只需要有不同的导航及一个公共页面一个公共控制器文件就可以解决多个模块类似的页面显示及数据交互，这样操作大大节省了资源占用及开发速度。