使用@output() 進行子父通信

Question

我的Parent Component有一個表單，它有一個隱藏的新密碼輸入和一個編輯密碼按鈕。

在Child Component通過單擊編輯密碼按鈕，將加載一個matdialog並輸入新密碼並保存。 由於這是一種不同的形式，我應該將它傳遞給Parent Component 。

任何人都可以幫助這個孩子與父母溝通嗎？

子組件

@Output() editedPassword = new EventEmitter<String>();
  saveButtonClick(){
    this.editedPassword.emit(this.myform.get('password').value);
  }

如何將此值傳遞給父組件？

Answer 1

嘗試這個：

子組件

@Output() editedEvent = new EventEmitter<String>();
  saveButtonClick(){
    this.editedEvent.emit(this.myform.get('password').value);
  } 

父 HTML

<child-app (editedEvent)="eventHandler($event)"></child-app>

父組件

public newPassword: string = '';

eventHandler($event) {
  this.newPassword = $event;
}

您還可以在此處查看完整示例。

此外，在Stackoverflow上的這個答案中有關於 Angular child-parent communication 的完整解釋。