Javascript 角度2在滚动条上的一组组件之间导航

我想通过以下方式更改基于滚动事件的组件：

• 如果用户到达组件的末端（滚动位置），则应加载下一个组件
• 类似地，如果用户到达组件的顶部（滚动位置），则应加载上一个组件
• 所有这些组件都应具有独立的路由器链路（路径）

因此，如果有2个页面（组件） 组件a和组件b分别具有路径“/a”和“/b” 它们应该加载到组件（父/包装器）中

我正在尝试检测父组件中的这些更改

import { Component, HostListener, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';
import { Router } from "@angular/router"


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {


  @Output() mouseWheelUp = new EventEmitter();
  @Output() mouseWheelDown = new EventEmitter();

  @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
    this.mouseWheelFunc(event);
  }
  @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
    this.mouseWheelFunc(event);
  }
  @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
    this.mouseWheelFunc(event);
  }

  ngOnInit() {
  }

  mouseWheelFunc(event: any) {
    let currentScrollPos = window.pageYOffset;
    let elemStartsAt = this.ref.nativeElement.offsetTop;
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    if(delta > 0) {
        console.log("Up "+currentScrollPos+" "+elemStartsAt);
    } else if(delta < 0) {
        console.log("Down"+currentScrollPos+" "+elemStartsAt);

    }
  }

  constructor(private router : Router) {}

}

从'@angular/core'导入{Component，HostListener，ElementRef，Output，EventEmitter，OnInit}；
从“@angular/Router”导入{Router}
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
@Output（）mouseweellup=neweventemitter（）；
@Output（）mouseWheelDown=新的EventEmitter（）；
@MouseWheelChrome上的HostListener（'mousewheel'，['$event']）（事件：任意）{
此.mouseweelfunc（事件）；
}
@MouseheelFirefox上的HostListener（'DOMMouseScroll'，['$event']）（事件：any）{
此.mouseweelfunc（事件）；
}
@HostListener（'onmousewheel'，['$event']）onMouseWheelIE（事件：任意）{
此.mouseweelfunc（事件）；
}
恩戈尼尼特（）{
}
mouseWheelFunc（事件：任意）{
让currentScrollPos=window.pageYOffset；
设elemStartsAt=this.ref.nativeElement.offsetTop；
var delta=Math.max（-1，Math.min（1，（event.wheeldta | | event.detail））；
如果（增量>0）{
console.log（“向上”+currentScrollPos+“”+elemStartsAt）；
}else if（delta<0）{
console.log（“向下”+currentScrollPos+“”+elemStartsAt）；
}
}
构造函数（专用路由器：路由器）{}
}

我找到了解决方案

父组件HTML

<router-outlet></router-outlet>

父组件TS

import { Component, HostListener, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';
import { Router } from "@angular/router"


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  public components = ["/1","/2"]; // Path of ordered components
  public current : number;
  public lastPos : any;

  @Output() mouseWheelUp = new EventEmitter();
  @Output() mouseWheelDown = new EventEmitter();

  @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
    this.mouseWheelFunc(event);
  }
  @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
    this.mouseWheelFunc(event);
  }
  @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
    this.mouseWheelFunc(event);
  }

  ngOnInit() {
    /** Route to 1 by default */
    this.router.navigate(["/1"]);
    this.current = 0;
    this.lastPos = -1;
  }

  mouseWheelFunc(event: any) {
    // console.log(window.event)
    let currentScrollPos = window.pageYOffset;
    // let elemStartsAt = this.ref.nativeElement.querySelector('p').offsetTop;
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    if(delta > 0) {
        // console.log("Up "+currentScrollPos+" "+elemStartsAt);
        if (currentScrollPos == 0) {
          this.navigateToPrevious();
        }
    } else if(delta < 0) {
        if (currentScrollPos == this.lastPos) {
          this.navigateToNext();
        } else {
          this.lastPos = currentScrollPos;
        }
        // console.log("Down"+currentScrollPos+" "+elemStartsAt);

    }
  }

  constructor(private router : Router, private ref : ElementRef) {}

  private navigateToNext() {
    if (this.current + 1 < this.components.length) {
      // Next component is available
      let path = this.components[++this.current];
      this.router.navigate([path]);
    }
  }

  private navigateToPrevious() {
    if (this.current > 0) {
      let path = this.components[--this.current];
      this.router.navigate([path]);
    }
  }

}

从'@angular/core'导入{Component，HostListener，ElementRef，Output，EventEmitter，OnInit}；
从“@angular/Router”导入{Router}
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
公共组件=[“/1”，“/2”]；//有序组件的路径
公共电流：数字；
公共场所：任何；
@Output（）mouseweellup=neweventemitter（）；
@Output（）mouseWheelDown=新的EventEmitter（）；
@MouseWheelChrome上的HostListener（'mousewheel'，['$event']）（事件：任意）{
此.mouseweelfunc（事件）；
}
@MouseheelFirefox上的HostListener（'DOMMouseScroll'，['$event']）（事件：any）{
此.mouseweelfunc（事件）；
}
@HostListener（'onmousewheel'，['$event']）onMouseWheelIE（事件：任意）{
此.mouseweelfunc（事件）；
}
恩戈尼尼特（）{
/**默认情况下路由到1*/
this.router.navigate（[“/1”]）；
该电流=0；
this.lastPos=-1；
}
mouseWheelFunc（事件：任意）{
//console.log（window.event）
让currentScrollPos=window.pageYOffset；
//让elemStartsAt=this.ref.nativeElement.querySelector（'p'）.offsetTop；
var delta=Math.max（-1，Math.min（1，（event.wheeldta | | event.detail））；
如果（增量>0）{
//console.log（“向上”+currentScrollPos+“”+elemStartsAt）；
如果（currentScrollPos==0）{
this.navigateToPrevious（）；
}
}else if（delta<0）{
if（currentScrollPos==this.lastPos）{
this.navigateToNext（）；
}否则{
this.lastPos=currentScrollPos；
}
//console.log（“向下”+currentScrollPos+“”+elemStartsAt）；
}
}
构造函数（专用路由器：路由器，专用引用：ElementRef）{}
私有导航下一个（）{
如果（此电流+1<此元件长度）{
//下一个组件可用
让path=this.components[++this.current]；
这个.router.navigate（[path]）；
}
}
私有导航{
如果（当前值>0）{
让path=this.components[--this.current]；
这个.router.navigate（[path]）；
}
}
}

您自己尝试了什么？代码的起点在哪里？我正试图识别两个事件-1）达到顶部2）达到终点