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

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

您的主要组件

{% if dom.dueDate > date('2012-12-31') %}

你的main.component.ts

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

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

2 个答案: