Question

所以我试图创建一个简单的模态模块，我希望能够传递一个简单的属性来指示是否应该打开它。

因此父组件通过输入值传递一个布尔值，如下所示：

<modal [(show)]="showModal"></modal>

这种方法效果很好，模态显示出预期效果。但是，由于模态具有自己的关闭按钮，因此需要一种方法将值更改传递回输入，并将父组件中showModal的值设置回false < / p>

我实际上预计这会自动发生，虽然我不确定为什么因为没有任何实际传回任何东西。那么有没有办法修改绑定到输入的父组件值，而不必使用Output并在父级中监听它？

这是我目前的模态组件：

export class ModalComponent {

    // Boolean to hold whether the modal is open or not
    modalOpen: Boolean = false;

    // Boolean used to toggle open class
    showModal: Boolean = false;

    // Boolean used to toggle display none/block
    hideModal: Boolean = true;

    // Function to open/close modal
    toggleModal = function(show: Boolean){
        if (show === true){
            this.hideModal = false;
            setTimeout(() => {
                this.showModal = true;
                this.modalOpen = true;
            }, 0)
        } else {
            this.showModal = false;
            setTimeout(() => {
                this.hideModal = true;
                this.modalOpen = false;
            }, 150)
        }
    }

    // Pulls in the "show" attribute and feeds it to toggleModal function
    @Input()
    set show( _show: Boolean ){
        if(typeof _show !== "undefined"){
            this.toggleModal(_show);
        }
    }
}

Answer 1

为了完成这项工作，我确实需要输出，但我实际上可以将它绑定到现有的输入中。

添加了以下输出：

@Output() showChange = new EventEmitter();

然后在更改值的位置，以下语法允许更新输入值：

this.showChange.emit(true);

结果组件如下所示：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'modal',
    template: require('./modal.component.html'),
    styles: [ require("./modal.component.scss") ]
})

export class ModalComponent {

    // Boolean used to toggle open class
    showModal: Boolean = false;

    // Boolean used to toggle display none/block
    hideModal: Boolean = true;

    // Function to open/close modal
    toggleModal = function(show: Boolean){
        if (show === true){
            this.hideModal = false;
            setTimeout(() => {
                this.showModal = true;
                this.showChange.emit(true);
            }, 0)
        } else {
            this.showModal = false;
            setTimeout(() => {
                this.hideModal = true;
                this.showChange.emit(false);
            }, 150)
        }
    }

    // Pulls in the "show" attribute and feeds it to toggleModal function
    @Input()
    set show( _show: Boolean ){
        if(typeof _show !== "undefined"){
            this.toggleModal(_show);
        }
    }

    // Updates show boolean in the parent component
    @Output() showChange = new EventEmitter();
}

通过输入修改父值

1 个答案: