javascript - 在同级组件中捕获事件

Question

我的应用看起来像这样:

<my-app>
  <my-toolbar></my-toolbar>
  <my-cube-container></my-cube-container >
</my-app>

我想从 my-toolbar 到 my-cube-container 进行通信。我正在从工具栏发送一个事件:

@Component({
  selector: 'my-toolbar',
  template: `...
                    <i class="fa fa-search-minus ic" (click)='onZoom(-1)' aria-hidden="true"></i>
                    `,
})
export class ToolbarComponent {
@Output() zoomEvent: EventEmitter<number> = new EventEmitter();

  onZoom(value:number){
    console.log('event sent');
    this.zoomEvent.emit(value);
  }
}

首先，我想在 my-cube-container 兄弟中捕获事件(请参阅上面的应用程序结构)。但是我读到，这种发射事件和捕获事件的关系仅供父子通信使用。 ** 是这样吗？ **

所以我尝试改为与父级通信(并在将来创建另一个 eventEmitter，以便我可以在我的目标组件 my-cube-container 中捕获事件)。但是我仍然没有 catch 这个事件。

@Component({
  selector: 'my-app',
  template: `
              <my-toolbar></my-toolbar>
              <my-cube-container (zoomEvent)="onZoom($event)"></my-cube-container>

            `
})
export class AppComponent {
  onZoom(val){
    console.log("event catched");
  }
}

我做错了什么？我需要更改 ngModul 中的某些内容吗？

Answer 1

您可以使用模板变量从模板中引用 sibling

<my-toolbar (zoomEvent)="container.onZoom($event)"></my-toolbar>
<my-cube-container #container></my-cube-container >