![](/img/trans.png)
[英]How is it possible to use the tab key to navigate between different child components in the same page with Angular?
[英]Angular 2 navigate between a set of components on scroll
我想以以下方式基于滚动事件更改组件:
因此,如果有两个页面(组件)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) {}
}
我找到了解决方案
父组件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]);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.