javascript - 为什么组件在没有 `changeDetetectorRef.markForCheck` 的情况下检测不到内部状态变化？

Question

一般

我有一个问题。如果不调用 changeDetectorRef.markForCheck 方法，我的组件不会重新呈现。

我有一个自动完成功能。当输入更改时，我发送一些异步请求(只是简单的 HttpClient 服务和 get 方法)。之后，我填写一些内部状态。

代码

注意 markForCheck 调用。如果我删除此行:没有任何效果。我注意到，如果我删除它并单击组件外部的某处，我会看到重新渲染。就在我点击某个地方的时候，组件被重新渲染了。

顺便说一下，我意识到 markForCheck 是偶然工作的。我只是尝试了一些东西并且它起作用了。我从一些文章中获得了有关 CD 机制和 CD 服务的信息。

这是我的主要组成部分:

@Component({
  selector: 'tags-auto-complete',
  template: `
    <tags-internal-auto-complete-input
      // ....
      (inputChanged)="onInputChange($event);"
    ></tags-internal-auto-complete-input>
    <tags-internal-auto-complete-results
      [data]="queryResultsTags"
      // ....
    ></tags-internal-auto-complete-results>
  `,
})
export class TagsAutoCompleteContainerComponent implements OnInit {
  inputChanged = new Subject<string>();
  queryResultsTags: Tag[] = [];

  constructor(
    private tagsService: TagsService,
    private changeDetectorRef: ChangeDetectorRef,
  ) {}

  onInputChange(query: string): void {
    this.inputChanged.next(query);
  }
  ngOnInit() {
    this.inputChanged
      .filter(inputValue => inputValue.length > 0)
      .debounceTime(400)
      .switchMap(query => this.tagsService.getTagsList({ query }))
      .do(() => this.changeDetectorRef.markForCheck()); // note this
      .subscribe((tags: Tag[]) => (this.queryResultsTags = tags)) // here I change the input of inner component
  }
  // ...

这是子组件(tags-internal-auto-complete-results):

@Component({
  selector: 'tags-internal-auto-complete-results',
  template: `
    <div class="container">
      <span *ngFor="let tag of data" (click)="selectTag.emit(tag);" class="tag">
        {{tag.name}}
      </span>
    </div>
  `,
  styleUrls: ['./results.styles.css'],
})
export class TagsAutoCompleteResultsComponent {
  @Input() data: Tag[] = [];

  @Output() selectTag = new EventEmitter<Tag>();
}

这些只是片段。完整代码可在 GitHub 上获得。

• main component
• inner component

顺便说一句，我有另一个组件(选定的标签 block )，我在其中输入了 showLoader。它有完全相同的问题。

我的想法

问题可能以某种方式与区域机制有关。从我知道的一些文章中，那个 zone.js monkey-patches 一些事件或 XHR 调用。我的案例是 XHR 调用(我没有深入研究 HttpClient，但它必须只是进行 HTTP 调用)。

我想要什么

我想了解为什么没有立即检测到更改(所以我将使用 markForCheck，我会没事的)或者我想找出我的代码中的错误。

希望你能帮助我。

Answer 1

这是由于在父组件上添加了 ChangeDetectionStrategy.OnPush。

在那个父级中，如果他的输入的引用没有改变，他的子树组件将不会被检查是否有变化。