Angular2 zone.run () vs ChangeDetectorRef.detectChanges ()
Diga que eu tenho umfunction noificationHandler()
no meu service.ts que está fora do contexto do angular.noificationHandler()
é invocado por terceiros enoificationHandler()
basicamente consome uma matriz e emite a matriz para componentes que se inscreveram em seu serviço.
service.ts
public mySubject: Subject<any> = new Subject();
public myObservable = this.mySubject.asObservable();
constructor() {
this.registry.subscribe("notification.msg",this.noificationHandler.bind(this));
}
noificationHandler(data) {
this.publishUpdate(data)
}
publishUpdate(data) {
this.mySubject.next(data);
}
component.ts
constructor(private service: myService) {
this.service.myObservable.subscribe(list => {
this.list = list;
});
}
^^^ Neste ponto, o modelo não é atualizado com os novos dados
Desde o"notification.msg"
está fora da zona do angular, a detecção de alteração do angular não é executada quando este evento("notification.msg")
é invocado.
Agora, existem 2 maneiras de chamar a detecção de alterações.
1) Envolvendo onoificationHandler()
dentro de zone.run () do angular
this.registry.subscribe("a2mevent.notification.msg", this.ngZone.run(() => this.noificationHandler.bind(this)));
2) Pedindo individualmente ao componente para detectar alterações
constructor(private service: myService, private ref: ChangeDetectorRef) {
this.service.myObservable.subscribe(list => {
this.list = list;
this.ref.detectChanges(); // <==== manually invoking change detection
});
}
Ambas as opções funcionam! E minha estrutura de componentes é a seguinte
A --> root component
B
C
D // my component is here (4 levels of nesting)
Questões -
1) detectChanges () detectará alterações apenas para seus próprios componentes ou também executará a detecção de alterações em componentes filhos?
2) zone.run () aciona a detecção de alterações de todos os componentes desde a raiz até a folha?
Entre o zone.run () e detectChanges (), estou curioso para saber qual é o melhordesempenho?