角度 1 - 获取当前 URL 参数

Angular 1 - get current URL parameters

本文关键字：URL 参数 获取 角度      更新时间：2023-09-26

我想从当前URL中提取数据并在控制器中使用它。例如，我有这个网址：

app.dev/backend/surveys/2

我要提取的位：

app.dev/backend/：类型/：id

Angular 中有什么可以帮助我完成这项任务的吗？

从带有 ngRoute 的 URL 获取参数。这意味着您需要在应用程序中包含角度路由.js作为依赖项。有关如何执行此操作的更多信息，请参阅官方 ngRoute 文档。

问题的解决方案：

// You need to add 'ngRoute' as a dependency in your app
angular.module('ngApp', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) {
        // configure the routing rules here
        $routeProvider.when('/backend/:type/:id', {
            controller: 'PagesCtrl'
        });
        // enable HTML5mode to disable hashbang urls
        $locationProvider.html5Mode(true);
    })
    .controller('PagesCtrl', function ($routeParams) {
        console.log($routeParams.id, $routeParams.type);
    });

如果不启用$locationProvider.html5Mode(true);.网址将使用hashbang（/#/）。

有关路由的更多信息，请参阅官方角度$route API 文档。

旁注：这个问题回答了如何使用ng-Route实现这一点，但我建议使用ui-Router进行路由。它更灵活，提供更多功能，文档很棒，被认为是角度的最佳路由库。

您可以将

$routeParams注入控制器，并访问解析路由时使用的所有参数。

例如：

// route was: app.dev/backend/:type/:id
function MyCtrl($scope, $routeParams, $log) {
    // use the params
    $log.info($routeParams.type, $routeParams.id);
};

有关详细信息，请参阅角度$routeParams文档。

最好是生成类似 url 

app.dev/backend?type=surveys&id=2

，然后使用 

var type=$location.search().type;
var id=$location.search().id;

并在控制器中注入$location。

在路由配置中，您通常定义如下路由：

.when('somewhere/:param1/:param2')

然后，可以使用 $route.current.params 在解析对象中获取路由或在控制器中，$routeParams .无论哪种情况，参数都是使用路由映射提取的，因此可以通过控制器中的$routeParams.param1访问param1。

编辑：另请注意，映射必须是精确的

/some/folder/:param1

将仅匹配单个参数。

/some/folder/:param1/:param2

将只匹配两个参数。

这与大多数动态服务器端路由略有不同。例如，NodeJS（Express）路由映射，其中您只能提供具有X个参数的单个路由。

例如：网址/：ID

var sample= app.controller('sample', function ($scope, $routeParams) {
  $scope.init = function () {
    var qa_id = $routeParams.qa_id;
  }
});

只需注入 routeParams 服务：

http://docs.angularjs.org/api/ngRoute.$routeParams

相关文章：