2017-01-23 25 views
6

Tôi có một thành phần Góc giúp tự động tạo các loại thành phần khác bên trong chính nó. Nó liên kết các thuộc tính riêng của nó với các thành phần con @Input thông qua một móc OnChanges.Góc 2 Phát hiện thay đổi OnPush cho các thành phần động

Ràng buộc này hoạt động tốt khi phát hiện thay đổi thành phần của trẻ được đặt thành Mặc định. Sau đó, các đầu vào mới được phát hiện và mẫu thành phần được cập nhật.

Tuy nhiên, nó không hoạt động khi phát hiện thay đổi là OnPush, sau đó thay đổi không được phát hiện. Tôi tin rằng sự thay đổi nên được phát hiện bởi vì một đối tượng bất biến mới, một chuỗi, được gán cho một thuộc tính thành phần @Input.

Dưới đây là một plunker để chứng minh: https://plnkr.co/edit/0wHQghtww2HXVbC27bC1

Làm thế nào tôi có thể nhận được cha mẹ-to-động-đứa trẻ này sở hữu ràng buộc để làm việc với ChangeDetectionStrategy.OnPush?

+0

Đối với bất cứ ai quan tâm, đây là vấn đề GitHub liên quan với nhiều thông tin hơn về lý do tại sao tính năng phát hiện thay đổi OnPush hoạt động khác nhau đối với các thành phần động - https: //github.com/angular/angular/issues/14087 –

Trả lời

3

Như thể workaround cho thành phần OnPush sẽ được sử dụng cùng với setter cdRef.markForCheck():

thay đổi phát hiện-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

+0

Giải pháp tuyệt vời, cảm ơn @yurzui –

Các vấn đề liên quan