EventEmitter不适用于Chrome / Safari [英] EventEmitter does not work on Chrome/Safari

问题描述

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

  import {Directive，Output，EventEmitter} fromangular2 / core; 
 
 @Directive（{
 selector：'[track-scroll]'，
 host：{'（window：scroll）'：'track（$ event）'} 
 
}）
 
导出类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 '，
指令：[Collapse，DROPDOWN_DIRECTIVES，ROUTER_DIRECTIVES，TrackScrollDirective] 
}）
 
 export class AppHeader {
 public isCollapsed：boolean = false; 
 
 pageY：number = 0; 
 
构造函数（
 public authService：AuthenticationService 
）{} 
 
 onPageYChange（pageY：number）{
 this.pageY = pageY; 
 console.debug（PageY Pos，pageY）; 
} 
} 
  

在该组件的模板中，我们具有如下：

 < nav class =navbar navbar-default navbar-fixed-top top-navbartrack-scroll（pageYPositionChange） =onPageYChange（$ event）[ngClass] ={floating：pageY> 10}> 
  

一切都在FF中精美地工作，但这就是其他地方。 （试过safari，chrome）

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

更新

显然，$ code> $ event.pageY 不存在于chrome ...，实际上没有关于页面位置的信息。我从哪里得到它？

解决方案

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

<$来自'angular2 / core'

@Directive（{
selector：'[track-滚动]'，
// host：{'（window：scroll）'：'track（$ event）'}，
}）
export class TrackScrollDirective {
@Output （）pageYPositionChange：EventEmitter< any> = new EventEmitter（）;

构造函数（）{
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-fluidtrack-scroll（pageYPositionChange）=onPageYChange（$ event）> 
< div class =row> 
< div class =col-md- 12> 
< app-header>< / app-header> 
< secure-outlet signin =登录未授权=AccessDenied>< / secure-outlet> 
< / div> 
< / div> 
< / div> 
`，
指令：[TrackScrollDirective] 
}）
 export class AppHeader {
 public isCollapsed：boolean = false; 
 
 pageY：number = 0; 
 
构造函数（/ * 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& h2> 
< app-header>< / app-header> 
< div style =height：200vh; border：5px solid red;>< / div> 
`
}）
导出类App {
} 
  

I created (with lots of help), the following directive, where I am tracking Y position of a screen and firing an event with this information.

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

And trying to listen to that event in a component:

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

where in the template of that component we have as follows:

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

Everything works beautifully in FF, but that's about it, nowhere else. (tried safari, chrome)

What is missing? My only thought is that I am using the wrong EventEmitter

UPDATE

Apparently $event.pageY does not exist in chrome... and in fact there is no information about page position at all. Where do I get it from?

解决方案

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

这篇关于EventEmitter不适用于Chrome / Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！