通过 ViewContainerRef 创建的 OnPush 组件更改后，Angular View 未更新

Question

使用 Angular 4.3 及以下版本 Plunkr .

请考虑以下组件:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button type="button" (click)="toggle()">Toggle</button>
      <div #anchor></div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App {
  @ViewChild('anchor', {read: ViewContainerRef}) anchor: ViewContainerRef;
  dynamicRef: ComponentRef;
  value = true;

  constructor(private cfr: ComponentFactoryResolver, private cdr: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    let factory = this.cfr.resolveComponentFactory(Dynamic);
    this.dynamicRef = this.anchor.createComponent(factory);
    this.dynamicRef.instance.value = this.value;
    this.dynamicRef.changeDetectorRef.detectChanges();
  }

  toggle(): void {
    this.value = !this.value;
    this.dynamicRef.instance.value = this.value;
    this.dynamicRef.changeDetectorRef.detectChanges();
  }
}

@Component({
  template: `Value: {{value}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Dynamic {
  @Input() value = true;
}

App 组件使用标准 ComponentFactoryResolver + ViewContainerRef 策略创建 Dynamic 组件。这两个组件都有一个 OnPush 更改检测策略。调用 App.toggle() 方法时，它会切换 App.value，将此新值传播到 Dynamic.value 并强制进行更改检测在动态组件的变化检测器上运行。我希望动态组件的模板显示正确的值，但它实际上永远不会改变。将两个组件切换到默认更改检测策略可提供预期的行为。

为什么动态组件模板无法正确重新渲染？如何修复此问题？

Answer 1

每个动态创建的组件都有一个宿主视图。所以你有以下层次结构:

AppComponentView
   DynamicComponentHostView
       DynamicComponentView

当你这样做时:

this.dynamicRef.changeDetectorRef

您将获得DynamicComponentHostView的changeDetectorRef。当您运行 detectChanges 时，您会为 DynamicComponentHostView 运行更改检测，而不是 DynamicComponentView。

然后，如果您设置 OnPush 策略，父组件会更新子组件的绑定(bind)，并决定是否对子组件运行更改检测。然而，重要的是，输入绑定(bind)是在模板编译期间定义的。动态组件的情况并非如此。因此，如果您想使用 OnPush，则必须在此组件上手动触发更改检测。为此，您需要获取DynamicComponentView 的更改检测器。你可以这样做:

export class Dynamic {
  @Input() value = true;

  constructor(public cd: ChangeDetectorRef) {

  }

然后像这样触发更改检测:

this.dynamicRef.instance.cd.detectChanges();

Here is the plunker .

有关更改检测的更多信息，请阅读 Everything you need to know about change detection in Angular .