Situación actual:

tengo unparent y unchild componente.

losparent inicializa elchildLos datos de@Input. Y elchild notifica al padre, cuando el usuario editó los datos usando el@Output. Y porque ellos datos son inmutables, elchild tiene que enviar los datos junto con esa notificación.

Cuando elparent recibió una notificación, verificará si los datos enviados son válidos y luego lo configurará (esto también propagará el nuevo valor a algunos otros componentes secundarios).

El problema:

Al configurar los nuevos datos dentro delparent, por supuesto, también se lo dará alchild componente que acaba de enviar los datos. Esto activará elchild'sngOnChanges, que luego desencadena una nueva pintura de la interfaz de usuario.

Algunos antecedentes:

losparent tiene varios diferenteschild componentes, que dependen todos de la mismamyItem datos y puede editar estos datos y luego notificar alparent en cambio.

Aquí hay una versión simplificada del código, que debería mostrar el problema.

Componente principal:

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

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

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

Componente hijo:

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())
    }

Como puede ver, elchild componente toma los datos de la@Input y lo hace mutable Y antes de enviarlo de vuelta alparent lo hará inmutable nuevamente.

¿Hay algún patrón para prevenir estos eventos circulares?