在没有观察者的情况下编写组件

该答案概述了在不使用观察程序的情况下用于编写AngularJS
1.5组件的五种技术。

• 使用

  ng-change

  指令
• 使用

  $onChanges

  生命周期挂钩
• 使用

  $doCheck

  生命周期挂钩
• 组件间通信与需求
• 使用RxJS从服务推送值

使用

ng-change

指令

有哪些可选方法可以在不使用watch来准备AngularJs2的情况下观察obj状态的变化？

您可以使用

ng-change

<textarea ng-model='game.game'ng-change="game.textChange(game.game)"></textarea>

为了将事件传播到父组件，需要将事件处理程序添加为子组件的属性。

<game game='myBox.game' game-change='myBox.gameChange($value)'></game>

JS

app.component("game",  {      bindings: {game:'=',      gameChange: '&'},      controller: function() {        var game = this;        game.textChange = function (value) { game.gameChange({$value: value});        });      },      controllerAs: 'game',      templateUrl: "/template2"});

并在父组件中：

myBox.gameChange = function(newValue) {    console.log(newValue);});

这是今后的首选方法。AngularJS的使用策略

$watch

$watch

$watch

$scope

使用

$onChanges

生命周期挂钩

在 1.5.3版中 ，AngularJS向服务添加了

$onChanges

$compile

从文档中：

控制器可以提供以下用作生命周期挂钩的方法：

• $
  onChanges（changesObj）-每当单向（

  <

  ）或插值（

  @

  ）绑定更新时调用。的

  changesObj

  是散列的键是已更改的绑定的属性的名称，和值是以下形式的对象

  { currentValue: ..., previousValue:...}

  。使用此挂钩可触发组件内的更新，例如克隆绑定值，以防止外部值的意外突变。
  
  

— AngularJS综合指令API参考-
生命周期挂钩

该

$onChanges

<

ng-change

ng-model

&

使用

$doCheck

生命周期挂钩

在 1.5.8版中 ，AngularJS向服务添加了

$doCheck

$compile

从文档中：

控制器可以提供以下用作生命周期挂钩的方法：

*

$doCheck()

-在摘要循环的每个回合上调用。提供机会来检测更改并采取措施。您希望对检测到的更改做出响应的任何操作都必须从此挂钩中调用。实现这一点对何时

$onChanges

调用没有影响。例如，如果您希望执行深度相等检查或检查Date对象，而Angular的更改检测器无法检测到该更改，因此不会触发，则此钩子可能很有用

$onChanges

。该钩子不带任何参数调用；如果检测到更改，则必须存储以前的值以与当前值进行比较。

— AngularJS综合指令API参考-
生命周期挂钩

组件间通信

require

指令可能需要其他指令的控制器来实现彼此之间的通信。这可以在组件中通过为require属性提供对象映射来实现。对象键指定属性名称，在这些属性名称下，所需的控制器（对象值）将绑定到所需组件的控制器。

app.component('myPane', {  transclude: true,  require: {    tabsCtrl: '^myTabs'  },  bindings: {    title: '@'  },  controller: function() {    this.$onInit = function() {      this.tabsCtrl.addPane(this);      console.log(this);    };  },  templateUrl: 'my-pane.html'});

有关更多信息，请参见《AngularJS开发人员指南》-组件间通信

使用[RxJS](https://github.com/Reactive-

Extensions/rx.angular.js)从服务推送值

例如，在您的服务处于保持状态的情况下该怎么办？如何将更改推送到该服务，页面上的其他随机组件会意识到这种更改？最近一直在努力解决这个问题

使用RxJS Extensions for Angular构建服务。

<script src="//unpkg.com/angular/angular.js"></script><script src="//unpkg.com/rx/dist/rx.all.js"></script><script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>var app = angular.module('myApp', ['rx']);app.factory("DataService", function(rx) {  var subject = new rx.Subject();   var data = "Initial";  return {      set: function set(d){        data = d;        subject.onNext(d);      },      get: function get() {        return data;      },      subscribe: function (o) {         return subject.subscribe(o);      }  };});

然后只需订阅更改。

app.controller('displayCtrl', function(DataService) {  var $ctrl = this;  $ctrl.data = DataService.get();  var subscription = DataService.subscribe(function onNext(d) {      $ctrl.data = d;  });  this.$onDestroy = function() {      subscription.dispose();  };});

客户可以使用订阅更改，

DataService.subscribe

DataService.set

在上PLNKR DEMO。