动态组件的Angular 2 OnPush更改检测

Question

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

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

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

以下是一个要说明的傻瓜： https://plnkr.co/edit/0wHQghtww2HXVbC27bC1

如何让这个parent-to-dynamic-child属性绑定与ChangeDetectionStrategy.OnPush一起使用？

Answer 1

OnPush组件的可能解决方法是将setter与cdRef.markForCheck()一起使用：

更改检测用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