AngularJS $watch 的 Angular 等价物是什么？

Question

在 AngularJS 中，您可以使用 $ $scope的$watch函数指定观察者来观察作用域变量的变化。 在 Angular 中监视变量变化（例如，在组件变量中）有什么等价物？

Answer 1

在 Angular 2 中，变化检测是自动的... $scope.$watch()和$scope.$digest() RIP

不幸的是，开发指南的变更检测部分尚未编写（在“架构概述”页面底部附近的“其他内容”部分中有一个占位符）。

这是我对变化检测如何工作的理解：

• Zone.js “monkey patches the world”——它拦截浏览器中的所有异步 API（当 Angular 运行时）。 这就是为什么我们可以在我们的组件中使用setTimeout()而不是$timeout之类的东西......因为setTimeout()是猴子补丁。
• Angular 构建并维护一个“变化检测器”树。 每个组件/指令都有一个这样的变化检测器（类）。 （你可以通过注入ChangeDetectorRef来访问这个对象。）这些变化检测器是在 Angular 创建组件时创建的。 他们跟踪所有绑定的状态，以进行脏检查。 从某种意义上说，这些类似于 Angular 1 为{{}}模板绑定设置的自动$watches() 。
  与 Angular 1 不同，变化检测图是一棵有向树并且不能有循环（这使得 Angular 2 的性能更高，我们将在下面看到）。
• 当事件触发时（在 Angular 区域内），我们编写的代码（事件处理程序回调）运行。 它可以更新它想要的任何数据——共享应用程序模型/状态和/或组件的视图状态。
• 之后，由于添加了挂钩 Zone.js，它会运行 Angular 的变更检测算法。 默认情况下（即，如果您没有在任何组件上使用onPush更改检测策略），树中的每个组件都会被检查一次 (TTL=1)... 从顶部开始，按深度优先顺序。 （好吧，如果您处于开发模式，更改检测会运行两次 (TTL=2)。请参阅ApplicationRef.tick()了解更多信息。）它使用这些更改检测器对象对您的所有绑定执行脏检查。
  • 生命周期挂钩被称为变更检测的一部分。
    如果您要查看的组件数据是原始输入属性（字符串、布尔值、数字），您可以实现ngOnChanges()以收到更改通知。
    如果输入属性是引用类型（对象、数组等），但引用没有改变（例如，您向现有数组添加了一个项目），则需要实现ngDoCheck() （请参阅此 SO回答更多关于这个）。
    您应该只更改组件的属性和/或后代组件的属性（因为单树遍历实现——即单向数据流）。 这里有一个 plunker违反了这一点。 有状态的管道也可以让你在这里绊倒。
• 对于找到的任何绑定更改，将更新组件，然后更新 DOM。 更改检测现已完成。
• 浏览器注意到 DOM 更改并更新屏幕。

其他参考以了解更多信息：

• Angular 的 $digest 在新版本的 Angular 中重生——解释了 AngularJS 的想法如何映射到 Angular
• 关于 Angular 中的变化检测你需要知道的一切- 非常详细地解释了变化检测是如何在幕后工作的
• Change Detection Explained - Thoughtram 博客，2016 年 2 月 22 日 - 可能是最好的参考
• Savkin 的变更检测重塑视频 - 一定要看这个
• Angular 2 变化检测是如何工作的？ - jhade 的博客 2016 年 2 月 24 日
• Brian 的视频和Miško 的关于 Zone.js 的视频。 Brian 的是关于 Zone.js 的。 Miško 是关于 Angular 2 如何使用 Zone.js 来实现变化检测的。 他还谈到了一般的变化检测，以及一些关于onPush的话题。
• Victor Savkins 博客文章：Angular 2 中的变更检测、 Angular 2 应用程序的两个阶段、 Angular、不可变性和封装。 他很快涵盖了很多领域，但有时他会很简洁，你会挠头，想知道遗漏的部分。
• Ultra Fast Change Detection (Google doc) - 非常技术性，非常简洁，但它描述/勾画了作为树的一部分构建的 ChangeDetection 类

Answer 2

此行为现在是组件生命周期的一部分。

组件可以在OnChanges接口中实现 ngOnChanges 方法来访问输入更改。

例子：

import {Component, Input, OnChanges} from 'angular2/core';


@Component({
  selector: 'hero-comp',
  templateUrl: 'app/components/hero-comp/hero-comp.html',
  styleUrls: ['app/components/hero-comp/hero-comp.css'],
  providers: [],
  directives: [],

  pipes: [],
  inputs:['hero', 'real']
})
export class HeroComp implements OnChanges{
  @Input() hero:Hero;
  @Input() real:string;
  constructor() {
  }
  ngOnChanges(changes) {
      console.log(changes);
  }
}

Answer 3

如果除了自动双向绑定之外，您还想在值更改时调用函数，则可以将双向绑定快捷语法改为更冗长的版本。

<input [(ngModel)]="yourVar"></input>

是简写

<input [ngModel]="yourVar" (ngModelChange)="yourVar=$event"></input>

（参见例如http://victorsavkin.com/post/119943127151/angular-2-template-syntax ）

你可以这样做：

<input [(ngModel)]="yourVar" (ngModelChange)="changedExtraHandler($event)"></input>

Answer 4

您可以使用getter function或get accessor充当角度 2 上的手表。

在此处查看演示。

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  template: `
  <button (click)="OnPushArray1()">Push 1</button>
  <div>
    I'm array 1 {{ array1 | json }}
  </div>
  <button (click)="OnPushArray2()">Push 2</button>
  <div>
    I'm array 2 {{ array2 | json }}
  </div>
  I'm concatenated {{ concatenatedArray | json }}
  <div>
    I'm length of two arrays {{ arrayLength | json }}
  </div>`
})
export class HelloWorld {
    array1: any[] = [];
    array2: any[] = [];

    get concatenatedArray(): any[] {
      return this.array1.concat(this.array2);
    }

    get arrayLength(): number {
      return this.concatenatedArray.length;
    }

    OnPushArray1() {
        this.array1.push(this.array1.length);
    }

    OnPushArray2() {
        this.array2.push(this.array2.length);
    }
}

Answer 5

这是为模型使用 getter 和 setter 函数的另一种方法。

@Component({
  selector: 'input-language',
  template: `
  …
  <input 
    type="text" 
    placeholder="Language" 
    [(ngModel)]="query" 
  />
  `,
})
export class InputLanguageComponent {

  set query(value) {
    this._query = value;
    console.log('query set to :', value)
  }

  get query() {
    return this._query;
  }
}

Answer 6

如果你想让它成为双向绑定，你可以使用[(yourVar)] ，但你必须实现yourVarChange事件并在每次变量更改时调用它。

像这样跟踪英雄变化

@Output() heroChange = new EventEmitter();

然后当你的英雄改变时，调用this.heroChange.emit(this.hero);

[(hero)]绑定将为您完成剩下的工作

看这里的例子：

http://plnkr.co/edit/efOGIJ0POh1XQeRZctSx?p=preview

Answer 7

这并没有直接回答这个问题，但是我在不同的场合遇到了这个 Stack Overflow 问题，以解决我会在 angularJs 中使用 $watch 的问题。 我最终使用了当前答案中描述的另一种方法，并希望分享它以防有人发现它有用。

我用来实现类似$watch的技术是在 Angular 服务中使用BehaviorSubject （ 更多关于主题），并让我的组件订阅它以获取（观察）更改。 这类似于 angularJs 中的$watch ，但需要更多设置和理解。

在我的组件中：

export class HelloComponent {
  name: string;
  // inject our service, which holds the object we want to watch.
  constructor(private helloService: HelloService){
    // Here I am "watching" for changes by subscribing
    this.helloService.getGreeting().subscribe( greeting => {
      this.name = greeting.value;
    });
  }
}

在我的服务中

export class HelloService {
  private helloSubject = new BehaviorSubject<{value: string}>({value: 'hello'});
  constructor(){}
  // similar to using $watch, in order to get updates of our object 
  getGreeting(): Observable<{value:string}> {
    return this.helloSubject;
  }
  // Each time this method is called, each subscriber will receive the updated greeting.
  setGreeting(greeting: string) {
    this.helloSubject.next({value: greeting});
  }
}

这是Stackblitz上的演示

Answer 8

在AngularJS你能够指定观察者，观察使用范围变量的变化$watch的功能$scope 。 在 Angular 中观察变量变化（例如，组件变量）的等价物是什么？