时间戳

首页 > 解决方案 > 查询参数的顺序对于 Angular UI 路由器应该无关紧要

angularjs - 查询参数的顺序对于 Angular UI 路由器应该无关紧要

问题描述

我正在开发一个使用 angular-ui-router 的 AngularJS 项目 v1.5.8。路线设置如下：

var myApp = angular.module('demoapp', ['ui.router']);

myApp.config(function($stateProvider) {
  $stateProvider
    .state('landing', {
      url: '/?paramOne&paramTwo&paramThree',
      template: '<h3>Landing Page with params.</h3>',
    })
    .state('landing.pageA', {
      url: '',
      template: '<h3>Landing Page A!</h3>',
    })
    .state('landing.pageB', {
      url: '',
      template: '<h3>Landing Page B!</h3>',
    })
    .state('error', {
      url: '/error',
      template: '<h3>Error Page!</h3>',
    });
  $urlRouterProvider.otherwise('/');
});

对于landing状态，参数并不总是按指定的顺序传递。有时，会省略一个或多个参数。一个不同的服务重定向到这个应用程序并传递查询参数。

标签： angularjsangular-ui-router

解决方案

有没有办法使部分或全部参数成为可选的？

是的。

从文档：

使用参数而不在状态 URL 中指定它们

即使参数未出现在 url 中，您仍然可以指定要接收的参数。您需要在状态中添加一个新字段 params 并按照 Using Parameters in Links 中的说明创建链接

例如，你有状态。

.state('contacts', {
        url: "/contacts",
        params: {
            param1: null
        },
        templateUrl: 'contacts.html'
    })

您创建的链接是

<a ui-sref="contacts({param1: value1})">View Contacts</a>

有关详细信息，请参阅

推荐阅读