Angular6 @HostListener如何作用在子组件上

Question

项目中引入了一个第三方组件ngx-treeview. 我们想在组件tree-view的ul上加入scroll事件监听。
类似下面的组件：

<div class='outer'>
    <tree-view>...</tree-view>
</div>

想通过@HostListener加入监听事件

import { Directive, HostListener } from '@angular/core';

@Directive({selector: '[scroller]'})
export class ScrollerDirective {

  @HostListener('scroll') onScroll() {
    console.log('scrolling...');
  }

}

如下修改：

<div class='outer' scroller>
    <tree-view>...</tree-view>
</div>

或者

<div class='outer'>
    <tree-view scroler>...</tree-view>
</div>

但是这两种方式都无法触发scroll事件.请问应该如何实现这个功能呢？
谢谢。

Answer 1

<div class='outer'>
    <tree-view scroler>...</tree-view>
</div>

scroler =>>> scroller 拼写错了乖乖 其他没问题