如何在使用组件路由角度浏览页面时保留值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"> 

UPDATE PLUNKER