如何使用组件路由角度1.5在页面中导航时保留值

最近我实现了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 

  
 
  
 
   
 
 
 
  
 
    
 
 
 
  
 
  
 
 
 
  
 
  111 222 333 444  
 
 
 
 Next Page

附加运行样本的图像： 在此处输入图像描述

您可以使用共享服务： 

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

更新PLUNKER

Interesting Posts