Google chrome EventEmitter不适用于Chrome/Safari

我（在很多帮助下）创建了以下指令，其中我跟踪屏幕的Y位置并使用此信息触发事件

import {Directive, Output, EventEmitter} from "angular2/core";

@Directive({
    selector: '[track-scroll]',
    host: {'(window:scroll)': 'track($event)'},

})

export class TrackScrollDirective {
    @Output('pageYPositionChange') pageYPositionChange: EventEmitter<any> = new EventEmitter();


    track($event: any) {
        this.pageYPositionChange.emit($event.pageY);
    }
}

其中，在该组件的模板中，我们有以下内容：

<nav class="navbar navbar-default navbar-fixed-top top-navbar" track-scroll (pageYPositionChange)="onPageYChange($event)" [ngClass]="{floating: pageY > 10}">

在FF中，一切都运行得很好，但仅此而已，没有其他地方。（已试用safari，chrome）

少了什么？我唯一的想法是我使用了错误的

EventEmitter

更新

显然，

$event.pageY

在chrome中不存在。。。事实上，根本没有关于页面位置的信息。我从哪里得到它？

import{EventEmitter，HostListener，Component，Directive，Output}来自'angular2/core'
@指示({
选择器：“[track scroll]”，
//主机：{（窗口：滚动）'track（$event）}，
})
导出类trackscroll指令{
@Output（）页面位置更改：EventEmitter=新的EventEmitter（）；
构造函数（）{
log（'TrackScrollDirective'）；
}
@HostListener（'窗口：滚动'，['$event']））
轨道（事件：任何）{
this.pageYPositionChange.emit（document.body.scrollTop）；
}
}

@组件({
选择器：“应用程序标题”，
//moduleId:module.id，
模板：`xxx
`,
指令：[跟踪滚动指令]
})
导出类AppHeader{
public iscollected:boolean=false；
pageY:number=0；
构造函数（/*公共authService:AuthenticationService*/）{
log（'AppHeader'）；
}
onPageYChange（页面：编号）{
this.pageY=pageY；
控制台调试（“PageY Pos”，PageY）；
}
}

@组件({
选择器：“我的应用程序”，
指令：[AppHeader]，
模板：`
你好
`
})
导出类应用程序{
}

在safari和chrome下是否调用了

跟踪

方法？我的意思是，如果在这些浏览器中触发了滚动事件…请尝试console。在调用track函数时记录$事件。类似于中所示的

document.body.scrollTop

如何？现在这个

document.body.scrollTop

在FF:D中不起作用，需要改用

document.documentElement.scrollTop

document.body.scrollTop不推荐使用。但这在Chrome上不起作用：（我需要这样做：
track（event:any）{console.debug（“document.body.scrollTop”），this.posTop（）；this.pageYPositionChange.emit（this.posTop（））；}posTop（）{返回window.pageYOffset的类型！=“未定义”？window.pageYOffset:document.documentElement.scrollTop？document.documentElement.scrollTop:document.body.scrollTop？document.body.scrollTop:0；}
<nav class="navbar navbar-default navbar-fixed-top top-navbar" track-scroll (pageYPositionChange)="onPageYChange($event)" [ngClass]="{floating: pageY > 10}">

import {EventEmitter, HostListener, Component, Directive, Output} from 'angular2/core'

@Directive({
  selector: '[track-scroll]',
  // host: {'(window:scroll)': 'track($event)'},
})
export class TrackScrollDirective {
  @Output() pageYPositionChange:EventEmitter<any> = new EventEmitter();

  constructor() {
    console.log('TrackScrollDirective');
  }

  @HostListener('window:scroll', ['$event'])
  track(event:any) {
    this.pageYPositionChange.emit(document.body.scrollTop);
  }
}

@Component({
  selector: 'app-header',
//  moduleId: module.id,
  template: `xxx
  <div class="container-fluid" track-scroll (pageYPositionChange)="onPageYChange($event)">
      <div class="row">
          <div class="col-md-12">
              <app-header></app-header>
              <secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet>
          </div>
      </div>
  </div>
  `,
  directives: [TrackScrollDirective]
})
export class AppHeader {
  public isCollapsed:boolean = false;

  pageY:number = 0;

  constructor(/*public authService:AuthenticationService*/) {
    console.log('AppHeader');
  }

  onPageYChange(pageY:number) {
    this.pageY = pageY;
    console.debug("PageY Pos ", pageY);
  }
}

@Component({
  selector: 'my-app',
  directives: [AppHeader],
  template: `
  <h2>Hello</h2>
  <app-header></app-header>
  <div style="height: 200vh; border: 5px solid red;"></div>
`
})
export class App {
}