首页 文章

Angular 2 OnPush更改动态组件检测

提问于
浏览
6

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

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

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

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

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

1 回答

  • 4

    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

相关问题