javascript - 如何使用组件路由 Angular 1.5 跨页面导航时保留值

Question

最近我实现了 Angular 1.5 组件路由。但我无法在跨页面导航时保留值。如何在跨页面导航时保留值。看看这个PLUNKER 。这是两页导航的非常基本的示例。

当我在第 1 页上输入/选择值并移至下一页时。当我进入上一页时，所有值都会重置，它不会保留值。我们如何在跨页面导航时实现保留值(value)？这个示例只有两个页面导航，在实际应用中我将有 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