store.select 订阅中的更改检测需要 markForCheck。为什么？

Question

我的应用程序组件正在商店中订阅 select。我将 ChangeDetectionStrategy 设置为 OnPush。我一直在阅读有关其工作原理的信息；需要更新对象引用以触发更改。但是，当您使用异步管道时，Angular 会期待新的可观察更改并为您执行 MarkForCheck。那么，为什么我的代码在触发订阅时不呈现频道（除非我调用 MarkForCheck）并且我设置了 channels$ 一个新的可观察频道数组。

@Component({
  selector: 'podcast-search',
  changeDetection: ChangeDetectionStrategy.OnPush, // turn this off if you want everything handled by NGRX. No watches. NgModel wont work
  template: `
    <h1>Podcasts Search</h1>
    <div>
      <input name="searchValue" type="text" [(ngModel)]="searchValue" ><button type="submit" (click)="doSearch()">Search</button>
    </div>
    <hr>
    <div *ngIf="showChannels">

      <h2>Found the following channels</h2>
      <div *ngFor="let channel of channels$ | async" (click)="loadChannel( channel )">{{channel.trackName}}</div>
    </div>
  `,
})

export class PodcastSearchComponent implements OnInit {
  channels$: Observable<Channel[]>;
  searchValue: string;
  showChannels = false;
  test: Channel;

  constructor(
    @Inject( Store)  private store: Store<fromStore.PodcastsState>,
    @Inject( ChangeDetectorRef ) private ref: ChangeDetectorRef,
  ) {}

  ngOnInit() {

    this.store.select( fromStore.getAllChannels ).subscribe( channels =>{
      if ( channels.length ) {
        console.log('channels', !!channels.length, channels);
        this.channels$ =  of ( channels );
        this.showChannels = !!channels.length;
        this.ref.markForCheck();
      }
    } );
  }

我尝试了多种解决方案，包括使用 subject 和调用 next，但这不起作用，除非我调用 MarkForCheck。

谁能告诉我如何避免调用 markForCheck？

Answer 1

这可能有点难以解释，但我会尽我最大的努力。当您的原始 Observable（商店）发出时，它没有绑定到模板。由于您正在使用 OnPush 更改检测，因此当此 observable 发出时，由于缺少绑定，它不会将组件标记为更改。

您正试图通过覆盖组件属性来触发更改标记。即使您在组件属性本身上创建新引用，这也不会将组件标记为更改，因为组件正在更改其自身属性而不是新值将推到组件上。

您认为异步管道在发出新值时将组件标记为更改是正确的。您可以在此处的 Angular 来源中看到：https://github.com/angular/angular/blob/6.0.9/packages/common/src/pipes/async_pipe.ts#L139

但是您会注意到，这仅在值（称为 async）（您与 async 管道一起使用的属性匹配 this._obj 时有效，async 管道已经记录为正在发射的 Observable 的对象。

由于您正在执行 channels$ = <new Observable>，因此 async === this._obj 实际上是不正确的，因为您正在更改对象引用。这就是您的组件未标记为更改的原因。

您还可以在我整理的 Stackblitz 中看到这一点。第一个组件覆盖传递给 async 管道的 Observable，而第二个组件不覆盖它并通过响应发出的更改来更新数据——这就是你想要做的：

https://stackblitz.com/edit/angular-pgk4pw（我使用 timer 因为它是模拟第三方未绑定 Observable 源的简单方法。使用输出绑定，例如点击更新，更难设置，因为如果在同一组件中完成，输出操作将触发更改标记）。

您并没有失去一切 -- 我建议您改为 this.channels$ = this.store.select(...)。 async 管道为您处理 .subscribe。如果您使用的是 async 管道，那么无论如何您都不应该使用 .subscribe。

this.channels$ = this.store.select(fromStore.getAllChannels).pipe(
  filter(channels => channels.length),
  // channels.length should always be truthy at this point
  tap(channels => console.log('channels', !!channels.length, channels),
);

请注意，您也可以将 ngIf 与异步管道一起使用，这应该避免您对 showChannels.

的需要

store.select 订阅中的更改检测需要 markForCheck。为什么？

Change detection in store.select subscribe requires markForCheck. Why?

ngrx

angular

angular-changedetection