EventEmitter из подкомпонента не работает

Question

Я хочу иметь двустороннюю привязку от родительского компонента к подкомпоненту. Это уже хорошо работает в одном из моих компонентов, который выглядит следующим образом (я выпустил некоторые css-классы и другие не относящиеся к делу части):

родительская привычка-show.component.html:

{{habit.label}}
<app-habit-edit [(habit)]="habit" ></app-habit-edit>

подкомпонент привычка-edit.component.html:

<input id="habitName" name="label" [(ngModel)]="habit.label" required/>

подкомпонент привычка-edit.component.ts:

@Input()
private habit: Habit ;

@Output()
habitChange = new EventEmitter<Habit>();

Это работает, как и ожидалось: я вижу привычную метку в родительском компоненте, и когда я изменяю значение на входе, оно тоже автоматически меняется. Теперь это часть компонента, которая не работает:

родительская привычка-edit.component.html:

 {{habit.goalActive}}
 <app-checkbox [(mappedModel)]="habit.goalActive" ></app-checkbox>

подкомпонент checkbox.component.html:

 {{mappedModel}}
 <input name="checkbox-input" [(ngModel)]="mappedModel" type="checkbox">

подкомпонент checkbox.component.ts:

 @Input()
 private mappedModel: boolean;

 @Output()
 mappedModelChange = new EventEmitter<boolean>();

Теперь в этом случае значение в родительском компоненте не обновляется, и я понятия не имею, почему, поскольку я сделал в основном то же самое. Значение в дочернем компоненте обновляется правильно.

Стоит отметить, что дочерний компонент из первого (рабочего) примера является родителем во втором примере -> хотя это не должно быть проблемой, не так ли?

Также обновление родительского контейнера работает, когда я добавляю кнопку всякий раз, когда нажимаю эту кнопку (хотя она все равно не обновляется из значения флажка):

родительская привычка-edit.component.html:

 {{habit.goalActive}}
 <app-checkbox [(mappedModel)]="habit.goalActive" ></app-checkbox>

подкомпонент checkbox.component.html:

 {{mappedModel}}
 <input name="checkbox-input" [(ngModel)]="mappedModel" type="checkbox">
 <button (click)="test()">Test</button>

подкомпонент checkbox.component.ts:

 @Input()
 private mappedModel: boolean;

 @Output()
 mappedModelChange = new EventEmitter<boolean>();

 test(){
    this.mappedModel = !this.mappedModel;
   this.mappedModelChange.emit(this.mappedModel);
 }

И если я добавляю тестовую функцию к самому вводу, то при каждом нажатии ничего не происходит (даже обновляется mappedModel в дочернем компоненте)

<label (click)="test()">{{mappedModel}}
   <input name="checkbox-input" [(ngModel)]="mappedModel" type="checkbox">

Кажется, проблема в том, что я не могу правильно связать привычку.goalActive с Eventemitter от субкомпонента (может быть, потому что это свойство объекта, а не весь объект?) Я все еще в замешательстве, так как это не проблема с [(ngModel)] на входах

Answer 1

В ваших входных данных в дочернем компоненте добавить событие изменения и вызвать функцию тестирования и удалить ngModel

<input name="checkbox-input"  [ngModel]="mappedModel" (change)="test()" type="checkbox">

Answer 2

Я думаю, что вы не используете свое мероприятие. Это работает в первом примере, потому что вы используете один и тот же объект в parent и child.

Можете ли вы попробовать это:

<app-checkbox [(mappedModel)]="habit.goalActive = $event" ></app-checkbox>