Question

我正在寻找一种解决方法，其中从firestore更新了我的模型的1个属性，但是所有详细信息（子级）组件都已重新呈现。

例如，我的模型具有作者，标题，图像和 likesCount 。更新NumberOfLikes后，Firestore将发送一个经过修改的操作，并在ngrx中通过我的ItemReducer进行有效负载：

   case actions.MODIFIED:
        return itemAdapter.updateOne({
            id: action.payload.url,
            changes: action.payload
        }, state);

这只会更新我的项数组中的一个对象，但是当子组件针对该特定项进行更新时，它会重新呈现所有4个属性，而不仅是 likesCount ，从而导致令人讨厌的闪烁

我认为在父组件和子组件中都实现的ChangeDetectionStrategy并没有帮助。想知道子组件是否有办法仅更新 likesCount 属性。

据我了解，ngrx正在传递新的引用，而我所使用的异步管道也起着重新呈现子组件的作用。

感谢您抽出宝贵的时间。将不胜感激。

容器组件：

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Item } from './../../../models/item';

@Component({
    selector: 'app-specials',
    styleUrls: ['specials-list.component.scss'],
    template: `
<div *ngIf="items$ | async; let items; else noItems">
  <app-item-detail
    *ngFor="let item of items"
    [detail]="item">
  </app-item-detail>
</div>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
...
ngOnInit() {
    this.items$ = this.store.select(fromItem.selectAll);
}
...

子组件

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
...
@Input()
detail: Item;

Answer 1

最后，将likesCount拉出了服务。应该从一开始就这样设计。

避免重新渲染子组件NgRx-Firestore

1 个答案: