捕捉事件

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（见上面的应用程序结构）的兄弟。但是我读到，这种排放事件和捕捉这些关系仅仅是为父母子女沟通而保留的。 **是这样吗？ **

所以我试图与父母沟通，然后（并在未来创建另一个事件发射器，以便我可以捕获目标组件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

您可以使用模板变量从括号周围（zoomEvent）都应该意味着它是被追赶它自己的事件我-工具栏模板

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