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中捕捉事件（参见上面的app结构）。但是我读到这种发射事件和捕捉这些事件的关系仅仅是为了保留父母子女的沟通。那是这样的吗？ **

所以我尝试与父进行通信，然后（并在将来创建另一个eventEmitter，以便我可以在目标组件my-cube-container中捕获该事件）。但是我仍然没有抓住这个事件。

@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

您可以使用模板变量来引用模板中的兄弟姐妹

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

在兄弟组件中捕获事件

1 个答案: