在AngularJS组件之间共享数据

Question

我正在尝试重构AngularJS 1.4 Web App以使用组件。
WebApp具有带有"搜索"输入框的标题：主节显示了根据搜索输入文本中输入的值过滤的联系人列表。
我正在尝试使用ui-router（要从列表切换到详细信息。我创建了标题和索引组件，定义了我存储搜索值的服务，定义了一个状态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;
   };
 }

路线

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

如果您对索引组件中的搜索具有绑定，则应相当简单。

/搜索/一些用户搜索

将使用搜索字符串解决您的状态，如果要切换到控制器上的特定搜索串状态，则可以使用：

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

另外一件事，您可以使用ng-model-options = {debounce：500}在键入后获得延迟（0.5s），并将Watcher放在控制器上以进行模型更改。

因此，您的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');
});

让我知道它是否有帮助。