Question

我指的是内存泄漏，我了解了ChangeDetectionStrategy。我非常好blog 。我在我的项目中尝试这个。现在的问题是，这会检测到Input中的更改，但如果组件发生更改会怎样。它能渲染吗？如果可能的话，任何关于它的演示应该是值得的。

Answer 1

只需使用OnPush，当您遇到具体问题时，请询问有关它的问题。如果您通过默认情况下不调用更改检测的方式修改模型，则始终可以注入ChangeDetectorRef并调用markForCheck()。

Answer 2

确保您实现ChangeDetectionStrategy并引用渲染器。通过使用renderer.listen并将检测器更改为markForCheck（），视图也将更新为正确的状态。

    @Component({
    selector: 'test',
    template: `
<div class="a-input">
  <div class="a-input__checkbox">
    <input type="checkbox" [id]="id" name="{{id}}" [(ngModel)]="checked" [disabled]="disabled">
    <label for="{{id}}"></label>
  </div>
</div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableCheckboxComponent implements CellComponent {
    @Input() data;
    @Input() id: number;
    @Input() checked: boolean = false;
    @Input() disabled: boolean = false;

    @Output() stateChanged: EventEmitter<any> = new EventEmitter<any>();

    constructor(private changeDetector: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer) {
        // Listen to click events in the component
        renderer.listen(elementRef.nativeElement, 'click', (event) => {
            if (!this.disabled) {
                this.checkedChange();
                this.changeDetector.markForCheck();
            }
        });
    }

    checkedChange(): void {
        this.checked = !this.checked;
        this.stateChanged.emit(/* send object id and status here */);
    }
}

我可以使用Angular2中的ChangeDetectionStrategy.OnPush更改组件

2 个答案: