Momentane Situation

Ich habe einparent und einchild component.

Dasparent initialisiert daschild 's Daten mit seiner@Input. Und diechild benachrichtigt das übergeordnete Element, wenn der Benutzer die Daten mit @ bearbeitet ha@Output. Und weil dasdata ist unveränderlich, daschild muss die Daten zusammen mit dieser Benachrichtigung senden.

Wenn dieparent wurde benachrichtigt, prüft, ob die übermittelten Daten gültig sind, und legt sie dann fest (dies gibt den neuen Wert auch an einige andere untergeordnete Komponenten weiter).

Das Problem

Beim Einstellen der neuen Daten imparent wird es natürlich auch an die @ gebchild -Komponente, die gerade die Daten übermittelt hat. Dies wird das @ auslöschild 'sngOnChanges, was dann ein Repaint der Benutzeroberfläche auslöst.

Einiger Hintergrund:

Dasparent hat mehrere verschiedenechild Komponenten, die alle auf dem gleichen @ beruhmyItem Daten und können diese Daten bearbeiten und dann das @ benachrichtigparent bei Änderung

Hier ist eine vereinfachte Version des Codes, die das Problem aufzeigen sollte.

Parent Component:

template:
    <child [input]="myItem" (output)="onMyItemChange($event)">

code:
    ngOnInit() {
        this.myItem = getDataViaHTTP();
    }

    onMyItemChange($event) {
        if($event.myItem.isValid()) {
            this.myItem = $event.myItem;
        }
    }

Kinderkomponente:

template:
    <input [(ngModel)]="myItem.name" (ngModelChange)="modelChange($event)">

code:
    @Input() input;
    @Output() output = new EventEmitter();

    myItem;

    ngOnChanges(changes) {
        this.myItem = changes.input.currentValue.toMutableJS();
    }

    modelChange($event) {
        this.output.emit(this.myItem.toImmutableJS())
    }

Wie Sie sehen können, diechild -Komponente übernimmt die Daten aus dem@Input und macht es veränderlich. Und vor dem Zurücksenden an dasparent es wird es wieder unveränderlich machen.

Gibt es ein Muster, um diese zirkulären Ereignisse zu verhindern?