入力を介して親値を変更する

Question

私は単純なモーダルモジュールを作成しようとしています。それを開く必要があるかどうかを指示する単純な属性を渡したいと考えています。

だから、親コンポーネントがそうのような入力値を介してブール渡し：

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

これは十分に機能し、期待通りのモーダルが表示されます。ただし、モーダルには独自の閉じるボタンがあるため、値の変更を入力に戻して親コンポーネントのshowModalの値をfalse

に設定する必要があります。なぜ何も実際に何も返っていないので、なぜ私は確信していません。だから、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

。

次の出力を加えた：

this.showChange.emit(true); 

得られた成分は次のようになります：

値は、次の構文は、入力値が更新させて変化させた

@Output() showChange = new EventEmitter(); 

そしてを

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(); 
}