AngularJs 1.5 – 组件不支持观察者,有什么工作？

what alt methods available to observe obj state changes without using watch in preparation for AngularJs2?

您可以使用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});
        });

      },templateUrl: "/template2"
});

并在父组件中：

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

这是未来的首选方法。使用$ watch的AngularJS策略不可扩展，因为它是轮询策略。当$ watch监听器的数量达到2000左右时，UI变得缓慢。 Angular 2中的策略是使框架更具反应性，并避免将$ watch放在$ scope上。

使用$ onChanges生命周期钩子

在版本1.5.3中，AngularJS将$ onChanges生命周期钩子添加到$ compile服务。

从文件：

The controller can provide the following methods that act as life-cycle hooks:

• $onChanges(changesObj) – Called whenever one-way (<) or interpolation (@) bindings are updated. The changesObj is a hash whose keys are the names of the bound properties that have changed,and the values are an object of the form { currentValue: ...,previousValue: ... }. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value.

—AngularJS Comprehensive Directive API Reference — Life-cycle hooks

$ onChanges钩子用于对组件的外部变化做出反应，单向绑定。 ng-change伪指令用于传递来自ng-model控制器的变化，绑定。

使用$ doCheck生命周期钩子

使用版本1.5.8，AngularJS将$ doCheck生命周期钩子添加到$ compile服务。

从文件：

The controller can provide the following methods that act as life-cycle hooks:

• $doCheck() – Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when $onChanges is called. For example,this hook could be useful if you wish to perform a deep equality check,or to check a Date object,changes to which would not be detected by Angular’s change detector and thus not trigger $onChanges. This hook is invoked with no arguments; if detecting changes,you must store the previous value(s) for comparison to the current values.

—AngularJS Comprehensive Directive API Reference — Life-cycle hooks

在服务中使用RxJS

What about in a situation where you have a Service that’s holding state for example. How could I push changes to that Service,and other random components on the page be aware of such a change? Been struggling with tackling this problem lately

使用RxJS Extensions for Angular建立服务。

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推送更改。

DEMO on PLNKR。