来自父组件中ng-template子元素的角度处理事件

Question

在我的角度应用程序中，我有一个自定义列表组件，该组件可以接收项目列表。正在使用它的组件将使用具有订购按钮的custom-list-item组件。

我需要处理custom-list-component中的订单更改事件，实现此目的的最佳方法是什么

完整的解决方案托管在这里...

https://stackblitz.com/edit/angular-uw1v8g?file=src%2Fapp%2Fcustom-list%2Fcustom-list.component.ts

请建议我是否错误地采用了这种通用列表设计。

Answer 1

关于如何处理这种情况，可能有多种方法，但是我想到的一种方法是使用浏览器的自定义事件，并使用Angular的HostListener

var event = new CustomEvent(
      'myCustomEvent',
      { payload: 'data'}
    );

然后通过

发送

document.dispatchEvent(event);

通过angular的HostListener处理它：

@HostListener('document:myCustomEvent', ['$event', '$event.detail.direction'])
  updateNodes(event, param1) {
    console.log(param1); //param 1 has $event.detail.direction value
  }

Full Example here

HostListener official docs

CustomEvent docs