Angular 2 HostListener无法正常工作

Question

我正在尝试添加一个window:scroll监听器,但滚动时没有任何反应

到目前为止我尝试过的:

使用host内部组件装饰器

@Component({
  ...
  host: {
    'window:scroll' : 'onWindowScroll($event)'
  },
  ...
)
export class PageWrapperComponent implements OnInit {
  ...
  public onWindowScroll(event: Event): void {
    console.log('scrolled');
  }
  ...
}

使用HostListener内部组件装饰器

export class PageWrapperComponent implements OnInit {
  ...
  @HostListener('window:scroll', ['$event'])
  public onWindowScroll(event: Event): void {
    console.log('scrolled');
  }
  ...
}

我也尝试在属性指令中使用它,但它也不起作用

两者都不会触发console log.我在SO中搜索过类似的问题,但即使我的代码基本相同,它仍然无效.

编辑

我能够解释为什么window:scroll没有工作,我正在使用host组件库,我覆盖了HostListener高度,console log它不喜欢那样.

Answer 1

在组件装饰器中使用主机

它应该是:

'(window:scroll)' : 'onWindowScroll($event)'

Plunker示例

在组件装饰器中使用HostListener 您的语法看起来正确

@HostListener('window:scroll', ['$event'])
public onWindowScroll(event: Event): void {
  console.log('scrolled');
}

Plunker示例

您还可以确保您的组件已滚动.在我的例子中,我模仿滚动:

styles: [`
    :host {
      display: block;
      height: 2000px;
    }
`]