Angular 变化检测不适用于 HttpClient.Subscribe 中的 ChangeDetectionStrategy.OnPush

Question

我转载了一个简单的stackblitz证明我一直遇到的问题。问题是我有一个将 bool 值传递给子组件的父组件。这个 bool 值是子组件上的@Input。需要注意的是，父组件使用 ChangeDetectionStrategy.OnPush。子组件没有显式设置此项。
当父组件在 内更改子组件的 bool 输入属性时订阅 方法，子组件最初不会检测到更改。总是需要点击 2 次才能让子组件检测到更改。
但是，当我在 subscribe 方法之外更改子组件的 bool 输入属性时，正确检测到更改的子组件，并且一切都按预期工作(1 单击子组件以识别更改)。
App.Component.ts(父组件)

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent  {
  constructor(private http: HttpClient) {

  }
  public isHelloVisible: boolean;
  public useHttpGet: boolean;

  showHello() {
    if (this.useHttpGet) {
    this.http.get('https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/cc0e3799790b0b34bdeb6fef28c3daf7/17.447409200000003,-78.3724573?units=si').subscribe(data => {
      this.isHelloVisible = true;  
    });
    } else {
      this.isHelloVisible = true;
    }
  }

  closeHello() {
    this.isHelloVisible = false;    
  }

子组件 (Hello.component.ts)

@Component({
  selector: 'hello',
  template: `<div *ngIf="showHello">
    Hello
    <div (click)="closeHello()">Click me to close Hello</div>
  </div>
  
  `,
  styles: []
})
export class HelloComponent  {
  @Input() showHello: boolean;
  @Output() close: EventEmitter<any> = new EventEmitter();

  ngOnChanges(changes: SimpleChanges): void {
    console.log(this.showHello);
  }

  closeHello() {
    this.close.emit(null);
  }

如果 useHttpGet 为 true 则不起作用，如果为 false 则一切正常。
我意识到可能有不同的方法来执行此操作或手动触发更改检测，但我更感兴趣的是为什么这不起作用，因为这对我没有任何意义。
可能看到这一点的最佳方式是关注 stackblitz 演示。

Answer 1

parent 设置为 OnPush 这意味着它仅在某些情况下运行更改检测:

输入引用更改。您在父级中没有任何 @Input

显式运行更改检测。你不是在这样做。

如果通过异步管道链接到模板的 observable 发出一个新值。没有异步管道的迹象。

事件源自组件或其子组件之一。您是通过单击来执行此操作的。

因此，当您使用 http 调用并单击按钮时，它会触发请求并运行更改检测。但是 api 调用是异步的，需要时间。到它回来时，更改检测已经运行并且不会再次运行，因为上述 4 个条件都不满足。
当您不使用 http 调用时，您单击按钮它将值更改为 true 并运行更改检测。一切都是同步的，因此它会立即更新 View 。
所以你的例子与子组件无关。您可以将 hello 标签更改为普通 div 并在 div 之间粘贴一些字母，您将看到相同的行为。
我已经更新了你的 StackBlitz使用异步管道的更具 react 性的方法。