EventEmitter funktioniert nicht in Chrome/Safari

Question

Ich habe (mit viel Hilfe) die folgende Direktive erstellt, wo ich Y Position eines Bildschirms verfolgen und ein Ereignis mit dieser Information auslösen werde.

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); 
    } 
} 

und zu versuchen, dieses Ereignis in einer Komponente zu hören:

import {TrackScrollDirective} from "../directives/track-scroll.directive"; 

@Component({ 
    selector: 'app-header', 
    moduleId: module.id, 
    templateUrl: './app-header.component.html', 
    directives: [Collapse, DROPDOWN_DIRECTIVES, ROUTER_DIRECTIVES, TrackScrollDirective] 
}) 

export class AppHeader { 
    public isCollapsed:boolean = false; 

    pageY: number = 0; 

    constructor (
     public authService: AuthenticationService 
    ) {} 

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

wo in der Vorlage dieser Komponente haben wir wie folgt vor:

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

Alles schön in FF arbeitet, aber das ist es, nirgendwo sonst. (versuchte Safari, Chrom)

Was fehlt? Mein einziger Gedanke ist, dass ich die falschen EventEmitter

UPDATE

Offenbar $event.pageY nicht in Chrom existieren bin mit ... und in der Tat gibt es keine Informationen über die Seitenposition überhaupt. Woher bekomme ich es?

Answer 1

https://plnkr.co/edit/3EIMK6?p=preview

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 { 
}