Javascript ChangeDetectionPush策略上未显示初始计数器值

我正在写一个简单的

计数器

。它在

父级（应用程序

）中具有

启动、停止、切换

功能，并使用

变更检测策略.OnPush在
子（计数器）组件
中显示更改的值

我面临的问题是无法在加载的子组件中显示
初始计数器值

下面是截图和代码


应用程序组件.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);
 }
}

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/core'导入{Component}；
从“rxjs”导入{BehaviorSubject}；
@组成部分({
选择器：'应用程序根'，
模板：`更改检测
开始
停止
切换CD

`,
})
导出类AppComponent{
_计数器=0；
_间隔；
_cdEnabled=false；
数据$=新的行为子对象（{counter:0}）；
通知程序$=新行为主体（false）；
开始（）{
如果（！此.\u间隔）{
这个._interval=setInterval（（（）=>{
this.data$.next（{counter:++this.\u counter}）；
}), 10);
}
}
停止（）{
clearInterval（此._interval）；
此值为._interval=null；
}
toggleCD（）{
this.\u cdEnabled=！this.\u cdEnabled；
this.notifier$.next（此.\CDU已启用）；
}
}

计数器.组件.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);
 }
}

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/core'导入{Component，Input，ChangeDetectionStrategy，OnInit，ChangeDetectorRef}；
从“rxjs/index”导入{Observable}；
@组成部分({
选择器：'计数器'，
模板：`Items:{{{u data.counter}}`，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类计数器组件实现OnInit{
@输入（）数据：可观察；
@Input（）通知程序：可观察；
_资料：有；
构造函数（私有cd:ChangeDetectorRef）{}
恩戈尼尼特（）{
this.data.subscribe（（值）=>{
/**
在此下方。_data.counter在console.log中显示0，但
不在模板中
**/
这个。_数据=值；
这个.cd.markForCheck（）；
});
this.cd.detach（）；
this.notifier.subscribe（（值）=>{
如果（值）{
this.cd.repattach（）；
}否则{
this.cd.detach（）；
}
});
}
}

我使用的是Angular 6.1.0，您的AppComponent
data$
是一个行为主体，您已经给了它一个初始值。您的计数器组件
数据
需要您订阅的可观察数据。默认的BehaviorSubject在更改之前不会激发。要获取该值，必须在加载时查询：

@Input（）数据：行为主体；
恩戈尼尼特（）{
this.\u data=this.data.value；//从主题获取初始值
this.data.subscribe（（值）=>{
这个。_数据=值；
这个.cd.markForCheck（）；
}
);

应该可以了。
它不起作用。实际上我在console.log中打印了初始值。请查看我的编辑