Problema de Detecção de Mudanças – Por que isso está mudando quando é a mesma referência de object com On Push?

Eu pensei que estava bem claro sobre como a detecção de mudança angular funciona após esta discussão: Por que a detecção de alterações não está acontecendo aqui quando [valor] mudou?

Mas dê uma olhada neste plunk: https://plnkr.co/edit/jb2k7U3TfV7qX2x1fV4X?p=preview

@Component({ selector: 'simple', template: ` 
{{myData[0].name}}
`, changeDetection: ChangeDetectionStrategy.OnPush }) export class Simple { public @Input() myData; constructor() { } public onClick() { } }

Clique em um, ele mudou para c

Entendo que o evento click aciona a detecção de alterações no nível do aplicativo, mas [myData] = “testData” ainda está se referindo ao mesmo object e estou usando o On Push on Simple, por que um get foi alterado?

Isso é por design.

Se você tiver um componente com detecção de mudança OnPush , sua function detectChangesInternal não será acionada, a menos que uma das quatro coisas aconteça:

1) uma de suas alterações @Inputs

~ 2.4.x insira a descrição da imagem aqui

~ 4.xx insira a descrição da imagem aqui

Nota: @Input s deve ser apresentado no modelo. Veja o problema https://github.com/angular/angular/issues/20611 e comente

2) um evento vinculado é acionado a partir do componente ( esse é o seu caso )

Advertências: Há alguma diferença aqui entre 2.xx e 4

Angular ChangeDetectionStrategy.OnPush com componente filho que emite um evento

~ 2.4.x insira a descrição da imagem aqui

~ 4.xx insira a descrição da imagem aqui

3) você marca manualmente o componente a ser verificado ( ChangeDetectorRef.markForCheck() )

4) pipe asynchronous chama ChangeDetectorRef.markForCheck() internamente

 private _updateLatestValue(async: any, value: Object): void { if (async === this._obj) { this._latestValue = value; this._ref.markForCheck(); } } 

https://github.com/angular/angular/blob/2.4.8/modules/%40angular/common/src/pipes/async_pipe.ts#L137


Em outras palavras, se você definir OnPush para componente, o status do primeiro componente de verificação será alterado de CheckOnce para Checked e, depois disso, estará aguardando, desde que não CheckOnce status. Isso vai acontecer em uma das três coisas acima.

Veja também:

Há também boas explicações de como o trabalho de detecção de alterações angular2:

Aqui está o Live Example (Obrigado a Paskal) que explica a detecção de mudanças no onPush . ( Comp16 parece com o seu componente. Você pode clicar nesta checkbox).