Как передавать данные с одной страницы на другую в одностраничном приложении под углом

Question

Как я могу передать данные или значение с одной страницы на другую в угловом одностраничном приложении. Я впервые работаю с angular / typcript и 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'
})
})

in showUsers.html

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

Теперь я хочу записать userId в jquery-скрипте экрана редактирования пользователя, чтобы я мог получать пользовательские данные.

Как я могу это сделать ??

Я подписан на

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

Я также следовал за некоторыми вопросами по поводу переполнения стека

Как передать данные в маршрутизируемые компоненты Angular? Но это не помогло мне.

Answer 1

в конфигурации вашего роутера вы настроили как /user-edit/:userId,

тогда при клике по тегу привязки ваш URL будет (например),

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
      };

});

Answer 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;
});