在Angularjs組件之間共享數據

Question

我正在嘗試重構Angularjs 1.4 Webapp以使用組件。
該Webapp的標題帶有“搜索”輸入框：主要部分顯示了根據在“搜索”輸入文本中輸入的值過濾的聯系人列表。
我正在嘗試使用ui-router（從列表切換到詳細信息。我創建了Header and Index組件，定義了用於存儲Search值的服務，並定義了狀態app.index的“ resolve”調用了服務。
問題是，在加載狀態時，解析僅完成一次，而我想為每個jeypress更新篩選。
在我的代碼中，我已經將搜索模型綁定在父組件和標頭之間，因此我可以創建重復每個模板內標頭組件的組件，我認為它可以工作，但是我想知道是否有更優雅的方法（信號不是很優雅，你不這么認為嗎？）這是我的
App.html

<header-cnt-component search="$ctrl.search"></header-cnt-component>
<ui-view> </ui-view>

App.js

angular
  .module('app')
  .component('app', {
    templateUrl: 'app/containers/App.html',
    controller: App
  });

function App() { 
  this.search = {};
}

HeaderCnt.html

<nav class="navbar navbar-default" role="navigation">
    <div class="collapse navbar-collapse" id="nav-toggle">
        <form class="navbar-form navbar-right" role="search">
            <input type="text" class="form-control" placeholder="Search" ng-model="$ctrl.search.name" ng-keyup="$ctrl.startSearch()">
        </form>
    </div>
</nav>

HeaderCnt.js

angular
  .module('app')
  .component('headerCntComponent', {
    templateUrl: 'app/components/HeaderCnt.html',
    controller: HeaderCnt,
    bindings: {
      search: '='
    }
  });

  /** @ngInject */
function HeaderCnt(contactsService, searchService, $location) {
  this.contactsService = contactsService;
  this.searchService = searchService;
  this.location = $location;
  this.contacts = contactsService.get();
}

HeaderCnt.prototype = {

  startSearch: function () {
    this.searchService.set(this.search);
    this.location.path('/');
  }
};

Index.html

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email Address</th>
                <th>Phone Number</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in $ctrl.contacts | filter:$ctrl.search">
                <td>{{contact.name}}</td>
                <td>{{contact.email}}</td>
                <td>{{contact.phone}}</td>
            </tr>
        </tbody>
    </table>
</div>

Index.js

angular
  .module('app')
  .component('indexComponent', {
    templateUrl: 'app/components/Index.html',
    controller: Index,
    bindings: {
      search: '='
    }
  });

/** @ngInject */
function Index(contactsService) {
  this.contactsService = contactsService;
  this.contacts = contactsService.get();
}

Index.prototype = {
};

search.js

function SearchService() {
   var search = {};

   this.get = function () {
     return search;
   };
   this.set = function (searchData) {
     search = searchData;
   };
 }

route.js

angular
  .module('app')
  .config(routesConfig);

/** @ngInject */
function routesConfig($stateProvider, $urlRouterProvider, $locationProvider) {
  $locationProvider.html5Mode(true).hashPrefix('!');
  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('app', {
      component: 'app'
    })
    .state('app.index', {
      url: '/',
      component: 'indexComponent',
      resolve: {
        search: function (searchService) {
          // var search = {};
          // search.name = 'aus';
          return searchService.get();
          // return search;
        }
      }
    });
}

Answer 1

如果我正確地找到了您，這可能會有幫助。 我將添加新的搜索狀態：

.state('app.index.search', {
      url: '/search/:searchString',
      component: 'indexComponent',
      resolve: {
        search: $stateParams => $stateParams.searchString
        }
      }
    })

如果您對indexComponent中的搜索具有綁定，那么rest應該相當簡單。

/ search /某些用戶搜索

將使用搜索字符串解析為您的狀態，如果要在控制器上切換到特定的searchString狀態，則可以使用：

$state.go('app.index.search', searchString)

還有一件事，您可以使用ng-model-options = {debounce：500}在輸入（0.5s）后獲得延遲，並將觀察器置於控制器上以更改模型。

所以你的HTML輸入：

<input type="text" class="form-control" placeholder="Search" ng-model="$ctrl.search.name" ng-model-options="{debounce: 500}"/>

並在控制器中：

this.$scope.$watch('$ctrl.search.name', (newVal, oldVal) => {
  newVal && $state.go('app.index.search', newVal');
});

讓我知道是否有幫助。