如何使用 AngularJs ui-router 添加可选的 $stateParams？答案

【问题标题】：How to add optional $stateParams using AngularJs ui-router?如何使用 AngularJs ui-router 添加可选的 $stateParams？
【发布时间】：2016-08-21 23:32:50
【问题描述】：

我想在$state 下方添加可选的$stateParams，可以说目前我有processId，我想将assessmentId 添加为可选的params。我的目标是从应用程序的两个地方启动相同的模板和控制器，它将基于$stateParams 启动。

我怎样才能完成这项任务？ app.js

添加挑战

.state('app.addPrcChallenge', {
            url: '/add/prcChallenge',
            params: { processId: null,assessmentId:null},
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },
            resolve: {
             existingChallenge: function(){
                    return null;
              },

编辑挑战

.state('app.editPrcChallenge', {
            url: '/edit/prcChallenge/:challengeKey/processId?/:assessmentId?',
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

在网址中直接提及它们，并为可选参数添加? 后缀：

.state('app.addPrcChallenge', {
   url: '/add/prcChallenge/:processId/:assessmentId?',
   templateUrl: 'views/process/processChallenge.html',
   controller: 'ProcessChallengesCtrl',
   data: {
     authenticate: true
   },
   resolve: {
     existingChallenge: function(){
        return null;
     }
   }
});

您可以在此更改后忽略 params 属性，因为 params 属性用于定义不作为 URL 一部分出现的参数

【讨论】：

编辑屏幕怎么样，我需要三个params，其中两个参数是可选的，我在问题中添加了编辑$state。
因为你错过了之前的:

【解决方案2】：

你的 URL 属性应该是这样的：

.state('app.addPrcChallenge', {
            url: '/add/prcChallenge/:processId/:assessmentId?',
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },
            resolve: {
             existingChallenge: function(){
                    return null;
              },

【讨论】：

如果我在 url 中指定参数，我还需要params:{processId:null,assessmentId:null} 吗？
那你就不需要了，它提供了参数的默认值
我编辑并添加了？到第一个参数，这意味着它是可选的
你说的答案是错误的，因为assessmentId后面没有?
好的。我看到您已对其进行了编辑，但这仍然是错误的，因为您将processId 设为可选，而要求assessmentId 是可选的。看我上面的回答

【解决方案3】：

.state('app.addPrcChallenge', {
   url: '/add/prcChallenge/:processId/:assessmentId',
   templateUrl: 'views/process/processChallenge.html',
   controller: 'ProcessChallengesCtrl',
   params: {
     processId: null,
     assessmentId: null
   }
   data: {
     authenticate: true
   },
   resolve: {
     existingChallenge: function(){
        return null;
     }
   }
});

【讨论】：

请提供更多详细信息，例如您选择这种方法的原因以及您的代码为何有效。