微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

但是,当更改检测为OnPush时,它不起作用,则不会检测到更改.我认为应该检测到更改,因为新的不可变对象(字符串)被分配给组件@Input属性.

这是一个演示者:
https://plnkr.co/edit/0wHQghtww2HXVbC27bC1

如何将此父级到动态子属性绑定与ChangeDetectionStrategy.OnPush一起使用?

解决方法

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐