如何以角度在单页应用程序中将数据从一页传递到另一页

时间:2018-07-05 10:09:11

标签: javascript jquery angularjs angular-ui-router

如何在角度单页应用程序中将数据或值从一页传递到另一页。这是我第一次使用angular / typescript和javascript作为一个整体。

我的目标是将b = dict(df.set_index('FortNight').groupby(level=0).apply(lambda x : x.to_json(orient = 'records'))) print(b) {'2018-04-29': '[{"AmountValue":339632.0,"Customer":10992},{"AmountValue":27282.0,"Customer":10994},{"AmountValue":26353.0,.... 传递到userid页面。 我正在使用

edit user

我当前的结构是这样的 在 route.js

 "angular": "^1.7.2",
 "angular-route": "^1.7.2",

showUsers.html

app.config(function($routeProvider){
  $routeProvider
  .when('/',{
    templateUrl:'home.html'
  })
  .when('/user',{
    templateUrl:'showUsers.html'
  })
.when('/user-edit/:userId',{
  templateUrl:'editUser.html'
})
})

现在我要做的是在用户编辑屏幕的jquery脚本中捕获userId,以便获取用户数据。

我该怎么做?

我在关注

  1. https://www.w3schools.com/angular/angular_routing.asp
  2. https://docs.angularjs.org/tutorial

我还在堆栈溢出方面关注了一些问题

How do I pass data to Angular routed components? 但这对我没有帮助。

2 个答案:

答案 0 :(得分:2)

使用$ routeParams服务:$ routeParams服务允许我们检索路线参数。

var module = angular.module("myApp", ['ngRoute']);
module.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/route1/:param1/:param2', {
            templateUrl: 'route1.html',
            controller: 'RoutingController'
        })
        .when('/route2/:param1/:param2', {
            templateUrl: 'route2.html',
            controller: 'RoutingController'
        })
        .otherwise({
            redirectTo: '/route1/default-book/default-page'
        });
}]);
module.controller("RoutingController", function ($scope, $routeParams, $location) {
    // Using $routeParams
    $scope.param1 = $routeParams.param1;
    $scope.param2 = $routeParams.param2;
});

答案 1 :(得分:0)

在路由器配置中,您已配置为/user-edit/:userId

然后点击定位标记,您的网址将为(例如)

http://some-sitename.com#/user-edit/92

请使用$routeParams

位于编辑控制器$routeParams.userId中的

将获取您所需的值,即您的情况下为92。

您可以像这样深入使用

app.controller("EditController", function ($scope, $routeParams) {
    // Using $routeParams
    $scope.userId = $routeParams.userId;

     $scope.editMethod = function() {
         // inside this method use $scope.userId
      };

});