Angular 2 动态组件的OnPush变化检测

Question

我有一个 Angular 组件，可以在其内部动态创建各种其他类型的组件。它通过 OnChanges 挂钩将自己的属性绑定到子组件 @Input 属性。

当子组件的更改检测设置为默认值时，此绑定工作正常。然后检测到新输入并更新组件模板。

但是，当变化检测为OnPush时，它不起作用，则检测不到变化。我相信更改应该被检测到，因为一个新的不可变对象，一个字符串，被分配给一个组件 @Input 属性.

这里有一个 plunker 来演示： https://plnkr.co/edit/0wHQghtww2HXVbC27bC1

如何让这个父到动态子属性绑定与 ChangeDetectionStrategy.OnPush 一起工作？

Answer 1

OnPush 组件的可能解决方法是将 setter 与 cdRef.markForCheck():

一起使用

change-detection-onpush.component.ts

@Component({
  selector: 'app-change-detection-onpush',
  template: `
    <div>
      ChangeDetectionStrategy.OnPush: {{ message || '[blank]' }}
    </div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChangeDetectionOnPushComponent implements IMyComponent {
  private _message: string;

  constructor(private cdRef: ChangeDetectorRef) {}

  set message(val: string) {
    this.cdRef.markForCheck();
    this._message = val;
  }

  get message() {
    return this._message;
  }
}

Modified Plunker

Angular 2 动态组件的OnPush变化检测

Angular 2 OnPush change detection for dynamic components

angular

angular2-changedetection