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 
   }

Angular 4 - 如何在没有EventEmitter的情况下从子组件调用父方法？

1 个答案: