如何使用组件路由角度1.5在页面之间导航时保留值 [英] how to retain values while navigating across pages using component routing angular 1.5
本文介绍了如何使用组件路由角度1.5在页面之间导航时保留值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
最近，我已经实现了有角度的1.5组件布线.但是我无法在浏览页面时保留值. 跨页面浏览时如何保留值.看看这个 PLUNKER .这是两页导航的非常基本的示例.
Recently I have implemented angular 1.5 component routing. But I am not able to retain values while navigating across pages. How can I retain values while navigating across page. have a look at this PLUNKER . This is very basic example of two page navigation.
当我在第1页上输入/选择值并移动到下一页时.当我进入上一页时，所有值都将重置，这不是保留值.在页面之间导航时如何实现保留价值?这个示例只有两个页面导航，在实际应用中，我将只有5-10个页面导航.
When I enter/select value on Page 1 and I move to Next Page. When I come to Previous Page all values reset, It's not retaining values. How can we achieve retaining values while navigating across pages?? This example having only two page navigation, In real application I will be having 5-10 page navigation.
如果可以保留切换选择.那很好啊. 这是我的代码:
If one can retain toggle selection. That would be great. Here is my code:
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>
附加正在运行的示例的图像:
attaching image of running sample:
推荐答案
您可以为此使用共享服务:
You can use shared service for this:
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">
这篇关于如何使用组件路由角度1.5在页面之间导航时保留值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
