Question

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

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

因此，如果有2页（组件）分别具有路径“ / a”和“ / b”的ComponentA和ComponentB 它们应该装入组件（父/包装）内

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

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

}

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

}

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

1 个答案: