브라우저의 옵션 상태 파라미터를 UI 라우터로 되돌리는 방법

브라우저의 옵션 상태 파라미터를 UI 라우터로 되돌리는 방법

는 한 안에 두자녀 이 부모 으로 한 줍니다URL.

두 가지 states를 들어, '하다'와 매개 .param1 ★★★★★★★★★★★★★★★★★」param2사용할 수 있습니다.params inside state ui-module 입니다.

주

$stateProvider.state('tabs.account', {
    url: '/account',
    views: {
        'content@tabs': {
            templateUrl: 'account.html',
            controller: function($scope, $stateParams) {
                //This params are internally used to make ajax and show some data.
                $scope.param1 = $stateParams.param1;
                $scope.param2 = $stateParams.param2;
            },
        }
    },
    params: {
        param1: { value: null }, //this are optional param
        param2: { value: null } //because they are not used in url
    }
});

, 은 실제로는 「파라메스」의 .URL그래서 그때를 옵션으로 생각하고 있습니다.

문제

plunkr를 보세요.계정 및 조사 탭은 2개입니다.

1. [ 하여 [Survey]에 합니다.textarea을 사용하다

2. [계정으로 이동(Go to Account)]을 클릭합니다.textarea다른 계정 탭으로 값을 설정합니다.ui-sref="tabs.account({param1: thing1, param2: thing2})"

3. '마음껏'가 거예요.param1&param2 에서 의 값( 「」( 「」)$stateParams

4. 다시 Survey 탭을 클릭하면 설문조사 페이지가 나타납니다.
5. back을 만 하면 "Browser back됩니다.param get " " " " " " " " 。null.

문제 발생률

당신은 내가 묻고 싶은 것을 얻었다고 생각합니다.옵션 파라미터 값은 왜 저장되지 않았습니까?그것들은 국가의 일부였기 때문입니다.

저는 아래의 두 가지 방법으로 이 문제를 해결할 수 있다는 것을 알고 있습니다.

• 두 뷰 간에 데이터를 공유하는 하나의 서비스를 만듭니다.
• URL에 를 들어 URL을 지정합니다.url: '/account/:param1/:param2',(하지만 난 이걸 좋아하지 않아)

이미 앵글의이 라우터를 시도해 봤는데, 저는 그게 잘 안 되는 것 같아요.어떻게 하면 좋을까요?

어떤 아이디어라도 있으면 좋을 것 같습니다만, 어떤 아이디어라도 좋습니다.

Github 제 g g g(영어)

params두 개의 자식 상태 간에 선택적 상태 매개 변수를 공유할 수 있도록 부모 상태로 정의합니다.

됩니다.$stateParams부모로부터 받은 것이므로, 실제의 「회피책」은 필요 없습니다.

주사만 돼요.$stateParams자녀 컨트롤러에서 일반적으로 사용되는 대로, 사용자는 배포되는 매개 변수에 완전히 액세스할 수 있습니다.특정 자식 상태에서 매개 변수를 사용하지 않으려면 매개 변수를 주입하는 것을 피하십시오.

이것은, 다음과 같이 동작합니다.

• 뒤로 단추
• [전송(Forward)]단추
• ui-sref(파라미터 없음(현황 유지)
• ui-sref(파라미터 포함)(덮어쓰기)

---

$stateProvider
  .state('parent', {
    params: { p1: null, p2: null }
  })
  .state('parent.childOne', {
    url: '/one',
    controller: function ($stateParams) {
      console.log($stateParams); // { p1: null, p2: null }
    }
  })
  .state('parent.childTwo', {
    url: '/two',
    controller: function ($stateParams) {
      console.log($stateParams); // { p1: null, p2: null }
    }
  })

의 스테이트 트리 내에서 이동하는 동안 언제든지 파라미터를 클리어하고 싶은 경우parent를 수동으로 실행해야 합니다.

이것이 이 솔루션을 사용함으로써 알 수 있는 유일한 진정한 경고입니다.

당신이 제시하는 경우 수동 클리어 하는 것이 바람직하지 않을 수 있다는 것을 알고 있지만, 당신은 그것에 대해 적극적인 입장을 취하지 않았습니다.그 때문에, 저는 그 제안이 가치가 있다고 생각합니다.

갱신된 플런커

회피책 중 하나는 스테이트 파라미터를 캐시하고 조건부로 로드하는 것입니다.tabs.account " " 를 할 수 . UI 라우터 상태 구성을 통해 실제로 사용자 정의의onEnter콜백은, 이러한 타입의 「스테이트에 들어간 시점에서 무엇인가 실행한다」라고 하는 상황에 대해서 실시합니다.

localStorage를 캐시로 사용하고 Plunker를 사용하는 기본 논리는 다음과 같습니다.

• 를 입력하면, 「 」를 하면,tabs.account태,,, 상상상변변변변 다다다다다다다
  • 있는 경우 로컬 스토리지에 캐시합니다.
  • 않으면 하십시오.$stateParams

다음은 참고용 코드 조각의 예입니다(Plunker에서 인용).

  $stateProvider.state('tabs.account', {
    ...
    onEnter: ['$stateParams', '$window', function($stateParams, $window) {
      if($stateParams.param1) {
        $window.localStorage.setItem('tabs.account.param1', $stateParams.param1);
      } else {
        $stateParams.param1 = $window.localStorage.getItem('tabs.account.param1');
      }
      if($stateParams.param2) {
        $window.localStorage.setItem('tabs.account.param2', $stateParams.param2);
      } else {
        $stateParams.param2 = $window.localStorage.getItem('tabs.account.param2');
      }
    }],
    ...
  }

한 가지 주의할 점은 파라미터가 무기한(예를 들어 리프레시 및 세션 간에) 유지된다는 것입니다.이를 피하기 위해 다음과 같이 애플리케이션 로드 시 캐시를 클리어할 수 있습니다.app.run.

직접 Angular 지지 the theunkunk unkunk unkunk theunk theunk theunk theunk the one the one the one one one the one one the one one the one one the ） 。$window서비스).Angular를 사용하는 것이 좋습니다.JS 모듈 - 프로덕션에서 각도 로컬 스토리지를 사용한 적이 있습니다.

당신이 원하는 것은 당신이 제공한 두 가지 솔루션 중 하나를 사용하지 않고서는 불가능하다고 생각합니다.

브라우저의 뒤로 버튼은 URL 기록만 유지합니다.ui-router의 내부 상태에 대해서는 아무것도 모르기 때문에 URL을 강제로 변경할 뿐입니다.

URL을 강제로 변경하면 내부 UI 라우터 시스템이 트리거되지만, 안타깝게도 UI 라우터에는 사용자가 직접 URL을 변경한 것과 동일한 URL 변경이 표시됩니다.

Ui-router는 URL이 가리키는 루트에 대해 새로운 루트 변경을 실행합니다.즉, 그는 당신이 "돌아가고 싶은" 것을 알지 못하고 아무런 매개 변수 없이 새로운 상태로 상태를 바꿀 것입니다.

요약

[뒤로] 버튼을 클릭하면 이전 상태로 돌아가지 않고 URL에 따라 새로운 상태로 상태가 변경됩니다.

따라서 URL에 파라미터를 추가하면 문제가 해결됩니다.URL이 차별적이기 때문에 원하는 주에 도착하게 됩니다.

도움이 됐으면 좋겠다.

나에게 이것은 XY 문제로 들린다.이 표면에서 문제가 발견되지 않는 동안 상태 매개 변수를 영속적으로 만드는 방법이 제안되고 있습니다.

질문의 정의에 따라 주(州)와 독립적으로 유지해야 하는 데이터가 있다.그래서 그것은 국가들에 대한 일종의 국제적 상대적인 것이다.따라서 이를 유지하는 서비스가 존재해야 하며 필요에 따라 양쪽 스테이트의 컨트롤러가 이를 유지합니다.한 주(州)의 범위를 벗어난 데이터는 주(州)에서 전달하지 마십시오.

는, 및 「DOM」, 「DOM」, 「DOM」, 「DOM」을 유지할 수 있기 때문에, 이 합니다.$scope다른 상태가 활성화되어 있는 동안.하지만 주정부가 다시 활성화되는 것은 주정부 가석방과는 아무런 관련이 없습니다.

언급URL : https://stackoverflow.com/questions/31542972/how-to-persist-optional-state-parameter-on-browser-back-in-ui-router