Angular UI-Router의 한 상태에서 더 많은 옵션 파라미터

Angular UI-Router의 한 상태에서 더 많은 옵션 파라미터

쿼리 문자열을 사용하지 않고 하나의 루트 이름만 사용하지 않고 루트에 옵션파라미터를 허용하려면 어떻게 해야 합니다.현재 각 루트를 5회 지정하여 모든 부품의 조합을 허용하고 있습니다.

모든 부품은 옵션이어야 합니다.루트는 모든 변동을 해결해야 합니다.

.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" })

좀 더 쉬운/더 깔끔한/얼굴 덜 못생긴 방법이 있을 것이다.

간단한 답변...

.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 },
    }
})

작동 중인 플런커가 있습니다.

여기서의 솔루션은 두 가지 유형일 수 있습니다.첫 번째는 매우 역동적입니다.두 번째는 필요에 따라 작동하며 좀 더 엄격하지만UI-Router기능을 제공합니다.

I. 동적 접근

첫 번째 예에서는 흥미롭지만 시나리오에서는 너무 복잡할 수 있습니다.이 Q&A와 매우 유사합니다.

재귀 UI 라우터 중첩 보기

알 수 없는 양의 폴더*(디렉토리)* 이름이 포함된 URL을 해결하려고 합니다.

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

상태는 다음과 같이 정의할 수 있습니다.

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

그러면 완전한 폴더 경로를 가진 하나의 매개 변수가 생성됩니다.

시나리오(정확히 3개의 파라메트를 취급)를 해결하고 싶은 경우, 이러한 것을 확장할 수 있습니다.

파일 처리용 컨트롤러:

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

리졸버를 사용한 상태 정의:

// 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. UI-Router 내장 기능params : {}

두 번째 시나리오는 사실 매우 간단합니다.사용하다UI-Router내장 기능:params : {}매뉴얼은 이쪽에서 확인하세요.

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

상태 정의는 다음과 같습니다.

.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},
    }
})

이러한 링크도 모두 기능합니다.

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

그리고 비결은 무엇이었을까?

squash - : squash는 현재 파라미터 값이 기본값과 동일한 경우 URL에서 기본 파라미터 값을 표시하는 방법을 설정합니다.스쿼시가 설정되어 있지 않은 경우 설정된 기본 스쿼시 정책이 사용됩니다.

동작 확인은 이쪽에서

다른 간단한 방법은 다음과 같이 파라미터의 기본값을 설정하는 것입니다.

params: {
  thing1: ""
}

Angular UI Router 문서에 따르면 기본값을 설정하면 파라미터가 자동으로 옵션입니다.

ui-sref를 사용하여 선택적 매개 변수를 전달할 수 있습니다.그런 다음 $stateParams 서비스를 사용하여 컨트롤러에 액세스할 수 있습니다.전달되지 않은 파라미터는 null로 남습니다.

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

언급URL : https://stackoverflow.com/questions/30225424/angular-ui-router-more-optional-parameters-in-one-state