EventEmitter無法在Chrome/Safari上運行

Question

我創建了（有很多幫助）下面的指令，我在這裏跟蹤屏幕的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); 
    } 
} 

，並試圖聽那個事件中的組件：

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

凡在該組件的模板，我們有如下：

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

一切精美的作品在FF，但這就是它，沒有其他地方。 （試過safari，鍍鉻）

缺少什麼？我唯一的想法是，我使用了錯誤的EventEmitter

UPDATE

顯然$event.pageY不存在鉻和......其實沒有關於頁面位置的所有信息。我從哪裏得到它？

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