Question

您正在使用AngularJS Component，需要帮助如何在Constructor（）中使用$ watch，如下所示我附加了我的代码结构。

 import template from './Mypage.component.html';
 export const MyComponent = {
 template,
 bindings: {
   myData: '<'
 },
 controller: class MyController {
   constructor($scope) {
   $scope.$watch(() => this.myData, newVal => {
    this._myFunction();
  });
   }
}

Answer 1

使用$onChanges()方法代替$scope.$watch()

class MyController {
  constructor() {
    // Your constructor...
  }

  $onChanges(changedObj){
    // Expect myData changes
    console.log(changedObj)
  }
}

更多信息here

Answer 2

您应该在$scope数组中添加$inject依赖项，并在构造函数中使用它应该可行。但请找到以下建议。

controller: class MyController {
  $inject = ['$scope'];
  constructor($scope) {
    $scope.$watch(() => this.myData, newVal => {
      this._myFunction();
    });
  }
}

我们都知道$watch会在每个摘要周期触发，以便在页面上更新data bidnings，这对性能原因不利。相反，您可以使用angularjs组件的$onChanges生命周期钩子，这样只有在绑定值发生更改时才会触发

controller: class MyController {
  constructor($scope) {}
  $onChanges(newVal) {
     this._myFunction();
  }
}

Angularjs Component和$ watch with ESinding in ES6

2 个答案: