Javascript 捕获同级组件中的事件
我的应用程序如下所示:Javascript 捕获同级组件中的事件,javascript,angular,angular2-template,Javascript,Angular,Angular2 Template,我的应用程序如下所示: <my-app> <my-toolbar></my-toolbar> <my-cube-container></my-cube-container > </my-app> 首先,我想在同级中捕获事件,即我的多维数据集容器(请参见上面的应用程序结构)。然而,我了解到,这种发射事件和捕捉事件的关系仅限于父子沟通。**是这样吗** 因此,我尝试与父级通信(并在将来创建另一个eventEmitter
<my-app>
<my-toolbar></my-toolbar>
<my-cube-container></my-cube-container >
</my-app>
首先,我想在同级中捕获事件,即我的多维数据集容器
(请参见上面的应用程序结构)。然而,我了解到,这种发射事件和捕捉事件的关系仅限于父子沟通。**是这样吗**
因此,我尝试与父级通信(并在将来创建另一个eventEmitter,以便在我的目标组件我的多维数据集容器中捕获事件)。然而,我仍然没有赶上这一事件
@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");
}
}
@组件({
选择器:“我的应用程序”,
模板:`
`
})
导出类AppComponent{
onZoom(val){
console.log(“捕获事件”);
}
}
我做错了什么?我是否需要更改ngModul中的某些内容?您可以使用模板变量引用模板中的同级变量
<my-toolbar (zoomEvent)="container.onZoom($event)"></my-toolbar>
<my-cube-container #container></my-cube-container >
括号(zoomEvent)应该表示是我的工具栏在捕捉自己的事件。它似乎有点落后——或者说冗余是一个更好的词——因为它首先是发出事件的组件。是否有一种内置的方法可以直接从组件类中执行此操作?捕获事件的不是my toolbar
。它实际上是模板中包含此HTML的组件(公共父级)。您可以使用共享服务和可观察对象在不是直接父子关系的组件之间进行通信,但对于这样一个简单的情况来说,这似乎有些过分了。
<my-toolbar (zoomEvent)="container.onZoom($event)"></my-toolbar>
<my-cube-container #container></my-cube-container >