Question

我想在主机组件中使用双向绑定变量来维护模态的状态。因此，<my-modal [(isOpen)]="isModalOpen"></my-modal>应该有用。

为此，我在模态组件中添加了一个事件发射器：@Output() isOpenEvent: EventEmitter<boolean> = new EventEmitter<boolean>(false)。另一个属性是布尔本身@Input() isOpen: boolean = false;。存在执行以下操作的函数close()：this.isOpen = false; this.isOpenEvent.emit(false)。 HTML中的按钮调用此close()函数。

主机组件有自己的局部变量，当调用模态的close()函数时，它应该更新。

我做错了什么？

Answer 1

您的isOpenEvent应为isOpenChange，以便双向绑定能够正常工作。

括号[]表示属性绑定，而paranthesis ()是事件绑定，如您所知。事件绑定应以Change结尾，以使同名双向绑定起作用。

我知道文档“隐藏”了这些有价值的信息，但请查看行

双向绑定语法实际上只是属性绑定和事件绑定的语法糖。 Angular将SizerComponent绑定到此：

文档中的

：https://angular.io/guide/template-syntax#two-way-binding---

<强> TL;博士

[isOpen] + (isOpenChange) = [(isOpen)]

Answer 2

当你从模态组件中发出事件时，我在你的代码片段中看不到父组件中调用的函数。

在父HTML中你应该有类似的东西：

  <app-modal (emitter)="receiveDataFromChild($event)"></app-modal>

并在父.ts文件中：

import { Component, OnInit, ViewChild  } from '@angular/core';
import { ChildComponent } from './modal-component';

@Component({
   selector: 'app-parent-component',
   templateUrl: './parent.component.html',
   styleUrls: ['./parent.component.css']
})

export class ParentComponent implements OnInit {

    private isOpen = false;
    // ******** Get reference of child component ****** 
    @ViewChild(ChildComponent ) child : ChildComponent ;

      constructor() {}

      ngOnInit() { }

      receiveDataFromChild(data) {
          this.isOpen = data;
      }
}

看看：this answer

希望这有帮助！

在Angular中双向绑定模态的布尔值

2 个答案: