在AngularJS中,您可以使用$watch
的$scope
函数指定观察者观察范围变量的变化。在Angular中观察变量(例如,组件变量)的等价物是什么?
在Angular 2中,变化检测是自动的... $scope.$watch()
和$scope.$digest()
R.I.P.
不幸的是,开发指南的更改检测部分尚未编写(在Architecture Overview页面的底部附近有一个占位符,在“其他东西”部分)。
以下是我对变更检测如何工作的理解:
setTimeout()
而不是像$timeout
...因为setTimeout()
是猴子修补。ChangeDetectorRef
来访问此对象。)这些更改检测器是在Angular创建组件时创建的。它们会跟踪所有绑定的状态,以便进行脏检查。从某种意义上说,这些类似于Angular 1为$watches()
模板绑定设置的自动{{}}
。
与Angular 1不同,变化检测图是一个有向树,不能有循环(这使得Angular 2的性能更高,我们将在下面看到)。onPush
更改检测策略),树中的每个组件都会从顶部按深度优先顺序检查一次(TTL = 1)。 (好吧,如果你处于开发模式,更改检测运行两次(TTL = 2)。有关这方面的更多信息,请参阅ApplicationRef.tick()。)它使用这些更改检测器对象对所有绑定执行脏检查。
生命周期钩子被称为变化检测的一部分。
如果要监视的组件数据是原始输入属性(String,boolean,number),则可以实现ngOnChanges()
以通知更改。
如果input属性是引用类型(对象,数组等),但引用未更改(例如,您将项添加到现有数组),则需要实现ngDoCheck()
(有关更多信息,请参阅this SO answer)这个)。
您应该只更改组件的属性和/或后代组件的属性(因为单个树步行实现 - 即单向数据流)。这是违反这一点的a plunker。有状态的管道也可以在这里trip you up。其他参考资料了解更多:
onPush
的一点点。此行为现在是组件生命周期的一部分。
组件可以在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);
}
}
如果除了自动双向绑定之外,您希望在值更改时调用函数,则可以将双向绑定快捷方式语法分解为更详细的版本。
<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>
您可以使用getter function
或get accessor
作为角度2的手表。
请参阅演示here。
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);
}
}
这是另一种使用模型的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;
}
}
如果你想使它成为2路绑定,你可以使用[(yourVar)]
,但你必须实现yourVarChange
事件并在每次变量变化时调用它。
像这样追踪英雄变化的东西
@Output() heroChange = new EventEmitter();
然后当你的英雄变了,打电话给this.heroChange.emit(this.hero);
[(hero)]
绑定将为您完成剩下的工作
看这里的例子:
当你的应用程序仍然需要$parse
,$eval
,$watch
喜欢Angular中的行为时试试这个
这并没有直接回答这个问题,但是我在不同的场合登陆了这个Stack Overflow问题,以便解决一些我会在angularJs中使用$ watch的东西。我最终使用的方法不同于当前答案中描述的方法,并希望在有人发现它有用的情况下分享它。
我用来实现类似$watch
的技术是在Angular服务中使用BehaviorSubject
(more on the topic here),并让我的组件订阅它以获得(观察)更改。这类似于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的演示