问题
通常,在Angular 2中,可以通过以下语法监听事件:
<my-elem (customEvent)="customEventProcessor"></my-elem>
但是当我使用路由器时,该主机 - <my-elem>
- 在任何模板中都不存在 . 相反,有一个 <router-outlet>
,我的组件在导航时加载 . 因此,我的问题的关键是,如何在不依赖模板的情况下强制我的主机听我的自定义事件?
可选细节
假设我有一些元素 list-view
,它是我的根组件的子元素 . list-view
通过正常语法侦听自定义事件:
<list-view (customEvent)="customEventProcessor()"></list-view>
为了完整起见,发出事件的 list-view
组件也具有可预测的结构:
<button (click)="onDetailsClick(propertyOfInterest)">Click here</button>
list-view
通过观察将事件发送给父母 .
class ListView {
...
public onDetailsClick(property: string): void {
this.customEvent.next({ value: property });
}
}
并且该事件触发 customEventProcessor()
函数 . 到现在为止还挺好 . 但是,当我使用路由器来控制是否存在 list-view
时,我不能(据我所知)插入命令来监视某些事件 .
我不确定处理这种情况的最佳方法是什么 .
1 回答
此问题尚未解决(请参阅this github issue) . 这是目前可能的解决方案之一(见this plunk):