如何使用組件路由角度1.5在頁面之間導航時保​​留值

Question

最近，我已經實現了角度1.5組件布線。 但是我無法在瀏覽頁面時保留值。 跨頁面瀏覽時如何保留值。 看看這個PLUNKER 。 這是兩頁導航的非常基本的示例。

當我在第1頁上輸入/選擇值，然后移至下一頁 。 當我進入上一頁時，所有值都將重置，而不是保留值。 在頁面之間導航時如何實現保留價值？ 這個示例只有兩個頁面導航，在實際應用中，我將有5-10個頁面導航。

如果可以保留切換選擇。 那很好啊。 這是我的代碼：

的JavaScript

(function(angular) {
    'use strict';
    var module = angular.module('app', ['ngComponentRouter']);

    module.config(function($locationProvider) {
      $locationProvider.html5Mode(true);
    });

    module.value('$routerRootComponent', 'myFirstApp');

    module.component('myFirstApp', {
      templateUrl: "mainview.html",
      $routeConfig: [{
        path: '/',
        redirectTo: ['/First']
      }, {
        path: '/first',
        name: 'First',
        component: 'firstComponent'
      }, {
        path: '/second',
        name: 'Second',
        component: 'secondComponent'
      }]
    })

    module.component('firstComponent', {
      templateUrl: "1.html",
      controllerAs: "vm",
      controller: function($rootScope) {
        $rootScope.title = "Title from Page 1";
        var vm = this;

        vm.clusters = {};

        vm.$onInit = $onInit;
        vm.selectNumericValue = selectNumericValue;
        vm.selectAlphaValue = selectAlphaValue;

        // default selection
        function $onInit() {
          vm.clusters.numericValue = '111';
          vm.clusters.alphaValue = 'AAA';
        }

        // setting numeric value
        function selectNumericValue(numValue) {
          vm.clusters.numericValue = numValue;
          if (vm.clusters.numericValue === '111') {
            vm.clusters.numericValue = '111';
          } else {
            vm.clusters.numericValue = '222';
          }
        }

        function selectAlphaValue(alphaValue) {
          vm.clusters.alphaValue = alphaValue;
          if (vm.clusters.alphaValue === 'AAA') {
            vm.clusters.alphaValue = 'AAA';
          } else if (vm.clusters.alphaValue === 'BBB') {
            vm.clusters.alphaValue = 'BBB';
          } else {
            vm.clusters.alphaValue = 'CCC';
          }
        }

      }
    });

    module.component('secondComponent', {
      templateUrl: "2.html",
      controller: function($rootScope) {
        $rootScope.title = "Title from Page 2";
      },
    });

  })(window.angular);

的HTML

      <div class="well form-horizontal">

    <div class="form-group" style="height: 50px;">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">NUMERIC VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <button id="clusters-fc" type="button" class="btn btn-toggle" value="111" ng-class="{active: vm.clusters.numericValue === '111'}" ng-click="vm.selectNumericValue('111')">
            111
          </button>
          <button id="clusters-ip" type="button" class="btn btn-toggle" value="222" ng-class="{active: vm.clusters.numericValue === '222'}" ng-click="vm.selectNumericValue('222')">
            222
          </button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">ALPHABETICAL VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <button type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'AAA'}" ng-click="vm.selectAlphaValue('AAA')">
            AAA
          </button>
          <button type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'BBB'}" ng-click="vm.selectAlphaValue('BBB')">
            BBB
          </button>
          <button id="def-ip-tenGb" type="button" class="btn btn-toggle" ng-class="{active: vm.clusters.alphaValue === 'CCC'}" ng-click="vm.selectAlphaValue('CCC')">
            CCC
          </button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">Entered VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <input type="textbox" class="form-control">
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">Selected VALUE</label>

      <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="btn-group">
          <select class="form-control" ng-model="vm.clusters.productionArrayType">
            <option>111</option>
            <option>222</option>
            <option>333</option>
            <option>444</option>
          </select>
        </div>
      </div>
    </div>

  </div>
  <a class="btn btn-success" ng-link="['Second']">Next Page</a>

附加運行樣品的圖像：

Answer 1

您可以為此使用共享服務：

module.service('sharedService', function() {
});

module.component('firstComponent', {
    templateUrl: "1.html",
    controllerAs: "vm",
    controller: function($rootScope, sharedService) {
      $rootScope.title = "Title from Page 1";
      var vm = this;

      vm.clusters = {};

      vm.$onInit = $onInit;
      vm.sharedService = sharedService;
      vm.sharedService.selectNumericValue = selectNumericValue;
      vm.sharedService.selectAlphaValue = selectAlphaValue;
      ...
 });

<input type="textbox" ng-model="vm.sharedService.alphaValue" class="form-control">

更新代理