Angular 4 - 如何在沒有EventEmitter的情況下從子組件調用父方法？

Question

我的應用程序中有以下層次結構：

AppComponent » ThemeComponent » HeaderNavComponent

ThemeComponent有一個方法

   qrIconClicked(){

   }

我需要從HeaderNavComponent調用此方法。

我怎樣才能做到這一點？

Answer 1

你可以通過定義@Output在你的孩子類型的變量HeaderNavComponent組件和氣泡事件，當你想從將由父組件捕捉孩子ThemeComponent和火的方法qrIconClicked()

所以你的孩子組件看起來像

export class HeaderNavComponent {
   @Output() editDone = new EventEmitter<EditEvent>();

  onSubmit() {
    if (some condition) {
      this.editDone.emit('some value');
    } else {
      this.editDone.emit('other value');
    }
  }
}

當您從子組件中引發editDone事件時，在調用子組件時，您可以分配一個函數，以便在該事件被激活時進行調用。

<header-nav(editDone)="qrIconClicked($event)"><header-nav>

最后，您的函數將在傳遞給父級的事件中從子級獲取值

   qrIconClicked(event: any){
     //event will hold value from chilld 
   }