EventEmitter из подкомпонента не работает - PullRequest
Новая
       21

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

2 голосов
/ 24 марта 2019

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

parent привычка-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">

subcomponent checkbox.component.ts: 

 @Input()
 private mappedModel: boolean;

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

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

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

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

parent привычка-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)] на входах

Ответы [ 2 ]

0 голосов
/ 24 марта 2019

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

<input name="checkbox-input"  [ngModel]="mappedModel" (change)="test()" type="checkbox">
0 голосов
/ 24 марта 2019

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

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

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