带有 ViewChildren 的 ExpressionChangedAfterItHasBeenCheckedError

Question

我“修复”了这个错误，但我想确保我没有做我不应该做的事情，因为这感觉不对……

这是我设计的示例，我有两个组件 faqComponent 和 questionAnswerComponent

<app-faq>
  <ul>
    <li *ngFor="let questionsAnswer of questionsAnswers">
      {{ questionsAnswer.question }}
    </li>
  </ul>
  <app-question-answer
     question="1. Why Foo Bar when Baz?"
     slug="why-foo-bar-when-baz"
     [activeSlug]="currentSlug"
  >
    <p>
     Lorem ipsum dolor sit amet
    </p>
  </app-question-answer>
    ... // a lot more question answer components
</app-faq>

我希望该列表由父组件上的 questionsAnswer 组件动态生成，这是通过使用子视图以我想要的方式工作

@ViewChildren(QuestionAnswerComponent) questionsAnswers: QueryList<QuestionAnswerComponent>;

除了我在日志中得到一个ExpressionChangedAfterItHasBeenCheckedError（但它仍然为我呈现列表）

为了解决这个问题，我发现如果我将 faq 组件更改检测策略设置为 OnPush，然后在 ngAfterContentChecked 中触发 markForCheck()，它会消除该错误。

所以我的问题是为什么这很糟糕？还是有另一种方法我应该迭代 viewChildren？

Answer 1

这是v8 中解决的问题，在 ViewChildren 和 ViewContent 上有明确的 static 标志。因此，如果您ng update @angular/core，更新原理图会将static: false 添加到您的questionAnswers，因为它会检测到它们是动态的，并且它们将在ngAfterViewInit 之后可用。

另一方面，我不太确定此更改是否改进了更改检测并消除了异常，您可以升级并告诉我们：D 但您的方法似乎是正确的，因为这是我们必须避免此错误的方式v7，希望它不会在 v8 中发生。
快乐的 ng 编码！