javascript - Angular 2 navigate between a set of components on scroll
问题描述
I want to change the components based on scroll event in the following way :
- If the user reaches the end (scroll position) of a component, the next component should get loaded
- Similarly if the user reaches the top (scroll position) of a component, the previous component should get loaded.
- All these components should have independent router links (path)
So if there are 2 pages (components) ComponentA and ComponentB with paths "/a" and "/b" respectively They should get loaded inside a component (parent/wrapper)
I am trying to detect those changes in the parent component
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) {}
}
解决方案
我得到了解决方案
父组件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]);
}
}
}
推荐阅读
- c# - 以编程方式设置按钮的前景文本颜色
- python - 如何在使用 Scrapy 跟踪一组网络抓取链接时结束递归
- python - 如何计算工作区中的对象数量?
- c - 如何包含必要的 kernel32.lib、标头 - 或在自定义应用程序中使用标准 dll?
- javascript - 两个异步函数和前两个执行后要执行的第三个函数
- maven - 从 Java 6、Ant 迁移到 Java 13、Maven
- ssl - Ubuntu openssl 创建的证书在浏览器中给出“不安全连接”
- c# - Itextsharp:添加新线型时如何避免替换现有线型?
- java - 如何在while循环外使用声明数组但在while循环中初始化它?
- php - Laravel:在 If 语句中正确使用 isset