如何使用双向数据绑定将数据从子组件传递到父组件？答案

【问题标题】：How to use Two-Way Data Binding to pass data from child to parent component?如何使用双向数据绑定将数据从子组件传递到父组件？
【发布时间】：2017-02-23 13:26:02
【问题描述】：

我正在尝试将一个布尔值从我的模态组件传递给我的主要组件，但它不起作用。

我的模态（孩子）：

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>

有什么想法吗？

【问题讨论】：

标签： angularjs angular data-binding components

【解决方案1】：

为了使速记双向绑定起作用，输入和输出的名称需要匹配输出具有附加 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>

【讨论】：

【解决方案2】：

你的主要组件

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

你的 main.component.ts

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

【讨论】：