如何使用组件路由角度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">

更新代理