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

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

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

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

我在做什么错？

来源

2017-07-27 Kabir Roy

尝试改变'isOpenEvent'用' isOpenChange' – echonax

嗨，我想读更多关于这个。你能把我和文件联系起来吗？ –

该文档没有明确说明这一点:-)它通过结合两个你得到的[[（ngModel）]双向绑定，给出了一个使用'[ngModel]'和'（ngModelChange）'的例子。如果问题解决了，我可以提供它作为答案。 – echonax

您的isOpenEvent应该是isOpenChange以便双向绑定工作。

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

我知道文档“隐藏”这一宝贵的信息，但检查线路

的双向绑定语法，实际上是属性绑定和事件的结合只是语法糖。角desugars的SizerComponent结合成这样：

在docs

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

TL;博士

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

来源

2017-07-27 13:16:20 echonax

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

在父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

希望这帮助！

来源

2017-07-27 12:34:32 JuanDM

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

回答

相关问题