Question

当双向绑定对象发生变化时，我正在尝试重新初始化组件。

  <ul class="nav nav-pills nav-stacked">
    <li ng-repeat="tab in tabs"
        ng-class="{'active': activeTab.id === tab.id }">
        <a href="" ng-click="setActive(tab)"> {{ tab.title }}</a>
    </li>
  </ul>

  <my-component tab="activeTab"></my-component>


app.component('myComponent', {
  template: '<div>{{ $ctrl.tab.title }}</div>',
  bindings: {
    tab: '='
  },
  controller: function() {
    var init = function() {
      console.log('hi')
    }
    init()
  }
})

每次activeTab.id更改时，如何确保调用init()？

我调查lifecycle hooks，这似乎不是答案。

here是一个代码

的傻瓜

Answer 1

您应该使用组件的$doCheck方法：

function myComponentController(){

  function init() {
    console.log('hi')
  }

  var previousTabId;
  this.$doCheck = function(){
    if (this.tab && previousTabId !== this.tab.id) {
      previousTabId = this.tab.id;
      init();
    }
  }.bind(this);

}

app.component('myComponent', {
  template: '<div>{{ $ctrl.tab.title }}</div>',
  bindings: {
    tab: '='
  },
  controller: [myComponentController]
})

来源：https://docs.angularjs.org/guide/component

$doCheck() - 在摘要周期的每个回合调用。提供一个有机会发现并采取行动。您希望采取的任何行动响应必须从中调用您检测到的更改这个钩子;实现这一点对$onChanges何时没有影响调用。例如，如果您希望执行此钩子可能很有用深度相等检查，或检查Date对象，更改为 AngularJS的变化检测器不会检测到它，因此也不会检测到触发$onChanges。这个钩子没有参数调用;如果检测更改时，必须存储先前的值以进行比较当前的价值观。

据我了解你的用例，你只需要一个单向绑定。如果你这样做，你应该使用$onChanges方法（保留给单向绑定属性）：

$onChanges(changesObj) - 每当更新单向绑定时调用。 changesObj是一个哈希，其键是绑定的名称已更改的属性，值是表单的对象 { currentValue, previousValue, isFirstChange() }。使用此钩子触发组件内的更新，例如克隆绑定值防止外部价值的意外突变。

您可能应该阅读有关$onInit，$onDestroy和$postLink的内容，这些内容也很有用。

Answer 2

app.component('myComponent', {
  template: '<div>{{ $ctrl.tab.title }}</div>',
  bindings: {
    tab: '=',
    tabChange:'&'
  },
  controller: function($scope) {
    $scope.$watch(
  function() { return $scope.$ctrl.tab; },
  function(newValue, oldValue) {
    init();
  }
);

var init = function() {
      console.log('hi');
    }
    init()
  }
})

angular 1.5组件初始化双向绑定更改

2 个答案: