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

Posted 2023-05-09

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

【英文标题】：How to pass data from one page to another in single page application in angular

【发布时间】：2018-12-13 18:38:34

【问题描述】：

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

我的目标是将userid 传递给edit user 页面。 我正在使用

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

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

中

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

在 showUsers.html

中

<a href="#!user-edit/92">User Edit screen</a>

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

我该怎么做？？

我在关注

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

我还关注了一些关于堆栈溢出的问题

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

【问题讨论】：

您正在使用 angularjs，并且您正在寻找 angular（2 或 4 或 5）的解决方案，这是您需要的链接（namitamalik.github.io/routeParams-in-AngularJS）

@Sanoj_V 谢谢你的链接 :)) 对不起，我不知道 angularjs 和 angular 是不同的，我认为这两个是相同的

【参考方案1】：

使用 $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;
);

【讨论】：

我可以在editUser.html里面的脚本中捕获参数吗？？我看到如果我这样做 param1 它会在 html 中打印值，我可以在脚本中以同样的方式添加该值吗？？

@user7747472 为什么首先在editUser.html 中有一个脚本？毕竟是部分/模板

@AlekseySolovey，实际上我在 electron.js 中使用它来构建桌面应用程序，使用 jquery 和 angular 进行路由。所以我所有的函数都在 jquery 中，这就是为什么

您可以尝试使用查询选择器获取值

【参考方案2】：

在您的路由器配置中，您已配置为 /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
      ;

);