Начальное значение счетчика не отображается в стратегии ChangeDetectionPush

Question

Я пишу простой counter.Он имеет start,stop, toggle функциональность в parent (app) и отображает измененное значение в child (counter) component с использованием ChangeDetectionStrategy.OnPush.

Проблема, с которой я столкнулся, не может отображать initial counter value в дочернем компоненте при загрузке.

Ниже приведен скриншот и код.

app.component.ts

import { Component } from '@angular/core';
import {BehaviorSubject} from 'rxjs';

@Component({
selector: 'app-root',
template: `<h1>Change Detection</h1>

<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<button (click)="toggleCD()">Toggle CD</button>
<hr>
<counter [data]="data$" [notifier]="notifier$"></counter>`,
})
export class AppComponent {

_counter = 0;
_interval;
_cdEnabled = false;
data$ = new BehaviorSubject({counter: 0});
notifier$ = new BehaviorSubject(false);

start() {
 if (!this._interval) {
    this._interval = setInterval((() => {
        this.data$.next({counter: ++this._counter});
    }), 10);
 }
}

stop() {
 clearInterval(this._interval);
 this._interval = null;
}
toggleCD(){
  this._cdEnabled = !this._cdEnabled;
  this.notifier$.next(this._cdEnabled);
 }
}

counter.component.ts

import {Component, Input, ChangeDetectionStrategy, OnInit, ChangeDetectorRef} from '@angular/core';
import {Observable} from 'rxjs/index';

 @Component({
  selector: 'counter',
  template: `Items: {{_data.counter}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent implements OnInit {

@Input() data: Observable<any>;
@Input() notifier: Observable<boolean>;
_data: any;

constructor(private cd: ChangeDetectorRef) {}

ngOnInit() {
  this.data.subscribe((value) => {
  /**
  Below this._data.counter is showing 0 in console.log but
  not in template
  **/
  this._data = value;
  this.cd.markForCheck();
});

this.cd.detach();
this.notifier.subscribe((value) => {
  if (value) {
       this.cd.reattach();
    } else {
      this.cd.detach();
    }
  });
 }
}

Я использую Angular 6.1.0

Answer 1

ваш AppComponent data$ является объектом поведения, которому вы дали начальное значение.ваш CounterComponent data ожидает Observable, на который вы подписаны.По умолчанию BehaviorSubject не срабатывает, пока не изменится.чтобы получить значение, вы должны запросить его при загрузке:

@Input() data: BehaviorSubject<any>;

ngOnInit() {
  this._data = this.data.value; // get the initial value from the subject
  this.data.subscribe((value) => {
    this._data = value;
    this.cd.markForCheck();
  }
);

должно сработать.