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，chrome）

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

更新

显然{* 1}}在Chrome中不存在......实际上根本没有关于页面位置的信息。我从哪里得到它？

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

EventEmitter不适用于Chrome / Safari

1 个答案: