Как использовать двустороннюю привязку данных для передачи данных от дочернего к родительскому компоненту?

Question

Я пытаюсь передать логическое из моего модального компонента в свой основной компонент, но он не работает.

Мой модальный (ребенок):

export class ModalForm implements OnChanges{ 
    @Input() isVisible; 
    @Output() visibleChange: EventEmitter<number> = new EventEmitter<number>(); 
    constructor() { 
     this.isVisible = false; 
    } 
    save() { 
      this.isVisible = false; 
      this.visibleChange.emit(this.isVisible); 
     }); 
    } 
} 

Мой Главный компонент:

<section [class.modalOpen]="isModalFormVisible> 
    <modal-form [(isVisible)]="isModalFormVisible"></modal-form> 
</section> 

Любые идеи?

Answer 1

Для сокращенная двухстороннее связывание работать имена входа и выхода должны соответствовать, где выход имеет addditional Change суффикс

@Input() isVisible; 
@Output() isVisibleChange: EventEmitter<number> = new EventEmitter<number>(); 

Затем вы можете использовать его как

<modal-form [(isVisible)]="isModalFormVisible"></modal-form> 

С кодом вам нужно будет длинная форма:

<modal-form [isVisible]="isModalFormVisible" (visibleChange)="isModalFormVisible = $event"></modal-form> 

Answer 2

Ваш главный компонент

<section [class.modalOpen]="isModalFormVisible> 
    <modal-form (visibleChange)="modalVisibleChanged($event)"></modal-form> 
</section> 

ваши main.component.ts

modalVisibleChanged(event){ 
    this.isModalFormVisible = event; 
}