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

Posted 2023-02-23

【中文标题】如何使用双向数据绑定将数据从子组件传递到父组件？

【英文标题】：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>

有什么想法吗？

【参考方案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;