在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');
});

让我知道是否有帮助。