javascript - stateparams - ui router angular 6

Angular UI-Router más parámetros opcionales en un estado

Question

¿Cómo puedo permitir parámetros opcionales a mis rutas sin usar una cadena de consulta y solo usar un nombre de ruta? Actualmente estoy especificando cada ruta CINCO VECES para permitir cualquier combinación de partes:

Todas las partes deben ser opcionales. La ruta debe resolver cualquier variación.

.state("login", { url: "/login", templateUrl: "login.html", params: { a: null, b: null, c: null, d: null } })
.state("loginA", { url: "/login/:a", templateUrl: "login.html", params: { b: null, c: null, d: null } })
.state("loginAB", { url: "/login/:a/:b", templateUrl: "login.html", params: { c: null, d: null } })
.state("loginABC", { url: "/login/:a/:b/:c", templateUrl: "login.html", params: { d: null } })
.state("loginABCD", { url: "/login/:a/:b/:c/:d", templateUrl: "login.html" })

DEBE haber una manera más fácil / más limpia / menos fea.

Answer 1

Hay un plunker de trabajo

La solución aquí podría ser de dos tipos. El primero es realmente muy dinámico. El segundo funciona según sea necesario, un poco más rígido, pero se beneficia de las funciones integradas de UI-Router .

I. enfoque dinámico

Observemos lo primero, que es interesante (pero quizás demasiado complicado en nuestro escenario) . Es muy similar a este Q & A

Enrutador ui recursivo vistas anidadas

Intentamos resolver la url que contiene una cantidad desconocida de carpetas * (directorios) * nombres:

<a href="#/files/Folder1">
<a href="#/files/Folder1/SubFolder1/">
<a href="#/files/Folder1/SubFolder1/SubFolderA">

El estado podría definirse así:

.state(''files'', {
  url: ''/files/{folderPath:[a-zA-Z0-9/]*}'',
  templateUrl: ''tpl.files.html'',
  ...

Y eso conducirá a una param folderPath con la ruta completa de la carpeta.

En caso de que nos gustaría resolver nuestro escenario (manejamos exactamente tres parámetros) podríamos extender cosas como esta

Controlador para el manejo de archivos:

.controller(''FileCtrl'', function($scope, a, b, c) {
    $scope.paramA = a; 
    $scope.paramB = b; 
    $scope.paramC = c; 
})

Definición de estado mediante resolución:

// helper method
var findParams = function($stateParams, position) {
   var parts = $stateParams.folderPath.split(''/'')
   var result = parts.length >= position ? parts[position] : null;
   return result;
  }

...

// state calls resolver to parse params and pass them into controller
.state(''files'', {
    url: ''/files/{folderPath:[a-zA-Z0-9/]*}'',
    templateUrl: ''tpl.files.html'',
    controller: ''FileCtrl'',
    resolve: {
        a : [''$stateParams'', function($stateParams) {return findParams($stateParams, 0)}],
        b : [''$stateParams'', function($stateParams) {return findParams($stateParams, 1)}],
        c : [''$stateParams'', function($stateParams) {return findParams($stateParams, 2)}],
    }
 })

II. Parámetros incorporados de UI-Router params : {}

El segundo escenario, de hecho es muy muy simple. Utiliza la función incorporada UI-Router : params : {} . Consulta su documentación aquí:

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state . $ stateProvider

Esta sería nuestra definición de estado:

.state(''login'', {
    url: ''/login/:a/:b/:c'',
    templateUrl: ''tpl.login.html'',
    controller: ''LoginCtrl'',
    params: {
        a: {squash: true, value: null},
        b: {squash: true, value: null},
        c: {squash: true, value: null},
    }
})

Y todos estos enlaces funcionarán también:

<a href="#/login">
<a href="#/login/ValueA">
<a href="#/login/ValueA/ValueB">
<a href="#/login/ValueA/ValueB/ValueC">

¿Y cuál fue el truco?

squash - {bool|string=} : squash configura cómo se representa un valor de parámetro predeterminado en la URL cuando el valor de parámetro actual es el mismo que el valor predeterminado. Si no se establece squash, utiliza la política de squash predeterminada configurada.

Compruébalo en acción aquí.

Answer 2

Otra forma sencilla de hacer esto es simplemente establecer un valor predeterminado para el parámetro, como este:

params: {
  thing1: ""
}

De acuerdo con los documentos del enrutador de UI angular, establecer un valor predeterminado automáticamente hace que el parámetro sea opcional.

Answer 3

Puede pasar parámetros opcionales utilizando ui-sref . Luego puede acceder a ellos en su controlador usando el servicio $ stateParams. Los parámetros que no se pasan simplemente permanecerán nulos.

.state("loginABCD", 
  { url: "/login/:a/:b/:c/:d",
    templateUrl: "login.html"
    controller: function($stateParams) {
      console.log($stateParams.a + $stateParams.b);
      }
  })

Answer 4

Respuesta corta....

.state(''login'', {
    url: ''/login/:a/:b/:c/:d'',
    templateUrl: ''views/login.html'',
    controller: ''LoginCtrl'',
    params: {
        a: { squash: true, value: null },
        b: { squash: true, value: null },
        c: { squash: true, value: null },
        d: { squash: true, value: null },
    }
})