Angular: моделирование прослушивания с помощью ChangeDetectionStrategy.OnPush

Question

Допустим, у меня есть одна большая модель Json, которую мой сервер отправляет моему интерфейсу, которая будет выглядеть следующим образом:

{
     dataA: { //some object },
     dataB: { //some object },
     dataC: { //some object },
     ...
}

Теперь, допустим, у меня есть ComponentA, который принимает dataA как @Input(), ComponentB, который принимает dataB как @Input(), и т. Д .:

@Component({
    selector: 'comp-a'
})
class ComponentA {
    @Input() _dataA;
}

@Component({
    selector: 'comp-b'
})
class ComponentA {
    @Input() _dataB;
}

// .... other components

@Component({
    selector: 'app',
    template:`
        <comp-a [_dataA]="dataA"></comp-a>
        <comp-b [_dataB]="dataB"></comp-b>
        ...
    `
})
class AppComponent {
}

И я хочу, чтобы эти компоненты использовали стратегию обнаружения изменений OnPush.

При получении новой модели может случиться так, что поле данных в модели не изменилось по сравнению с его предыдущим значением в предыдущей модели, поэтому я не хотел бы, чтобы они снова передавались как @Input() компоненту в избегайте бесполезного обнаружения изменений.

Есть ли какой-нибудь умный способ обнаружить изменения в моей модели на внешней стороне перед передачей данных в виде @Input() моим компонентам и уведомлять их только при изменении их соответствующих данных? Или я должен позволить Angular выполнить обнаружение изменений самостоятельно? Действительно ли здесь уместно OnPush?

Answer 1

OnPush повышает эффективность, не проверяя свойства модели и инициируя обновление при изменении экземпляра объекта, а не свойств объекта. Чтобы сделать то, что вы предлагаете, нужно изучить свойства вашего объекта, чтобы увидеть, изменилось ли что-нибудь. По сути, вы заново изобретаете обнаружение изменений, поэтому я не вижу смысла, и вам нужно сделать это лучше, чем команда Angular, чтобы увидеть какую-либо выгоду.

Вы также пометили этот вопрос с помощью rxjs, но в вопросе ничего о rxjs нет. Лучший способ реализовать обнаружение изменений OnPush - использовать rxjs observables и использовать асинхронный канал в вашем шаблоне. Таким образом, вы получаете только наблюдаемое, чтобы испустить обновленное значение.

@Component({
    selector: 'app',
    template:`
        <comp-a [_dataA]="dataA$ | async"></comp-a>
        <comp-b [_dataB]="dataB$ | async"></comp-b>
        ...
    `
})
class AppComponent {
    dataA$ = new BehaviorSubject<DataAModel>(undefined);
    dataB$ = new BehaviorSubject<DataBModel>(undefined);

    updateA() {
      if (a has changed) { // If your detection to check changes is inefficient then there is no point
        this.dataA$.next(a);
      }
    }

    updateB() {
      if (b has changed) {
        this.dataB$.next(b);
      }
    }
}