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

Question

我在我的应用程序中有以下层次结构：

AppComponent » ThemeComponent » HeaderNavComponent

主题组件有一个方法。

   qrIconClicked(){

   }

我需要从HeaderNavComponent中调用这个方法。

我该怎么做？

- Burak

---

您可以使用Injector来获取组件的实例：https://angular.io/api/core/Injector。此外，您可以在`HeaderNavComponent`的`input`上引用该方法，这将作为父子之间的“链接”起作用。或者，您可以引用父组件的整个`this`并将其作为子组件的输入。然而，这些解决方案都不是良好的实践，所以我个人建议使用`Injector`。请参考此链接：https://github.com/angular/angular/issues/10448（查看sod的帖子）。另外，您还可以使用`ViewContainerRef`。 - briosheje

Answer 1

您可以通过在子组件HeaderNavComponent中定义@Output类型变量并在需要时冒泡和触发事件来实现。这将被父组件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 
   }

- Aniruddha Das