在两个组件AngularJS之间进行过滤

Question

我知道我可以这样过滤：

<input type="search" ng-model="searchTable">
<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in $ctrl.rows | filter: searchTable">
      <td>{{ row.firstName }}</td>
      <td>{{ row.lastName }}</td>
    </tr>
  </tbody>
</table>

如何过滤<tr ng-repeat="row in $ctrl.rows | filter: searchTable">的<input type="search" ng-model="searchTable">和<tr ng-repeat="row in $ctrl.rows | filter: searchTable">是否位于单独的组件中？

这是一个简单的小提琴 。

据我了解，我需要在searchComponent上添加$onChanges()和表达式绑定bindings: { onChange: '&' } ，但并不完全了解如何实现它。

谢谢

Answer 1

这是工作中的小提琴。 您将搜索词存储在父组件中，并将其传递给两个子组件。

 var app = angular.module('app', []); app.controller('appController', function() { this.search = ""; }); app.component('searchComponent', { template: ` <h4>{{ $ctrl.title }}</h4> <label>Search table</label> <input type="search" ng-model="$ctrl.search"> `, controller: function() { this.title = 'Search Component'; }, bindings: { search: "=" } }); app.component('tableComponent', { template: ` <h4>{{ $ctrl.title }}</h4> <!-- <p>This works</p> <label>Search table</label> <input type="search" ng-model="searchTable"> --> <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr ng-repeat="row in $ctrl.rows | filter: $ctrl.search"> <td>{{ row.firstName }}</td> <td>{{ row.lastName }}</td> </tr> </tbody> </table> `, controller: function() { this.title = 'Table Component'; this.rows = [ {firstName: 'Zulu', lastName: 'Apple'}, {firstName: 'Alice', lastName: 'xRay'}, {firstName: 'Fred', lastName: 'Rogers'} ]; }, bindings: { search: "<" } }); 

 body { font-family: 'Arial', sans-serif; } table { border-collapse: collapse; } td, th { border: 1px solid grey; padding: 5px; } label { display: block; } input { margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script> <div ng-app="app"> <div ng-controller="appController"> <h3>Filter Between Components</h3> <search-component search="search"></search-component> <table-component search="search"></table-component> </div> </div> 

Answer 2

您可以尝试在组件中进行发射-之间的通信，如下面的代码所示。 另外，请使用给定场景的工作示例检查更新的jsfiddle 。

搜索组件控制器：

$scope.$watch('searchTable', function() {
  $rootScope.$emit('onEmitSearchData', $scope.searchTable);
});

表组件控制器：

$rootScope.$on('onEmitSearchData', function(event, data) {
  $scope.searchTable = data;
});