Angular 2在滚动的一组组件之间导航答案

【问题标题】：Angular 2 navigate between a set of components on scrollAngular 2在滚动的一组组件之间导航
【发布时间】：2018-07-10 06:27:25
【问题描述】：

我想通过以下方式根据滚动事件更改组件：

如果用户到达组件的末尾（滚动位置），则应加载下一个组件
同样，如果用户到达组件的顶部（滚动位置），则应该加载前一个组件。
所有这些组件都应该有独立的路由器链接（路径）

所以如果有 2 个页面（组件） ComponentA 和 ComponentB 分别具有路径“/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) {}

}

【问题讨论】：

你自己尝试了什么？您的代码起点在哪里？
我试图确定两个事件 - 1) 到达顶部 2) 到达终点

标签： javascript angular typescript angular5

【解决方案1】：

我找到了解决办法

父组件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]);
    }
  }

}

【讨论】：