Angular 2 OnPush Änderungserkennung für dynamische Komponenten

Question

Ich habe eine Angular-Komponente, die dynamisch verschiedene andere Arten von Komponenten in sich selbst erstellt. Es bindet seine eigenen Eigenschaften an untergeordnete Komponente @Input Eigenschaften über einen OnChanges Haken.

Diese Bindung funktioniert, wenn die Änderungserkennung der untergeordneten Komponente auf Standard festgelegt ist. Dann werden die neuen Eingaben erkannt und die Komponentenvorlage wird aktualisiert.

Es funktioniert jedoch nicht, wenn die Änderungserkennung OnPush ist, dann wird die Änderung nicht erkannt. Ich glaube, dass die Änderung erkannt werden sollte, da ein neues unveränderliches Objekt, eine Zeichenfolge, einer Komponente @Input Eigenschaft zugewiesen wird.

Hier ist ein Plunker demonstrieren: https://plnkr.co/edit/0wHQghtww2HXVbC27bC1

Wie kann ich diese Eltern-dynamic-Kind bekommen Eigentum Bindung mit ChangeDetectionStrategy.OnPush zu arbeiten?

Answer 1

Als mögliche Abhilfe für OnPush Komponente Setter unter Verwendung zusammen mit cdRef.markForCheck() würde:

Änderung erkennungs 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