如何在Angular 7中使用“路由器导航"滚动?

本文介绍了如何在Angular 7中使用“路由器导航"滚动?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的侧边栏导航组件sidebarponent.html是这样的:

my sidebar navigation component sidebarponent.html is like this:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand" href="#page-top"> <span class="d-block d-lg-none">Sujoy Debnath</span> <span class="d-none d-lg-block"> <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/resume.jpg" alt=""> </span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" routerLink="/about">About</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/experience">Experience</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/education">Education</a> </li> </ul> </div> </nav>

而sidebarponent.ts是这样的:

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-sidebar', templateUrl: './sidebarponent.html', styleUrls: ['./sidebarponent.css'] }) export class SidebarComponent implements OnInit { constructor() { } ngOnInit() { } }

当我单击关于"或体验它"时，会路由到这些组件，因为它们映射到我的app-routing-module.ts

when I click on About or Experience it Routes to those components as they are mapped in my app-routing-module.ts

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { IntroductionComponent } from './introduction/introductionponent'; import { ExperienceComponent } from './experience/experienceponent'; import { EducationComponent } from './education/educationponent'; const routes: Routes = [ {path: '', redirectTo: '/about', pathMatch: 'full'}, {path: 'about', component: IntroductionComponent}, {path: 'experience', component: ExperienceComponent}, {path: 'education', component: EducationComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

我的appponent.html就是这样.我通过选择器app-sidebar调用sidebarponent:

my appponent.html is like this. I am calling the sidebarponent by its selector app-sidebar:

<router-outlet></router-outlet> <app-sidebar></app-sidebar>

现在如何通过滚动来路由导航，这样当我向下滚动时，它会自动从即将到体验的位置向下移动到教育；或者当我向上滚动时，它会自动从体验到教育的位置向上移动到大约节.

Now how to route the navigation by scrolling such that when I scroll down it automatically moves down from about to experience to education or when I scroll up it automatically moves up from experience to education to about sections.

推荐答案

我的示例代码已启用

/page1

/page2

/page3

并在使用滚轮上下滚动时被激活，可以通过添加其他事件(例如，使用向上和向下箭头键)来实现与我相同的操作

and is activated when the wheel is used to scroll down and up, it's possible to implement the same thing that I did by adding other events (like with up and down arrow key)

在app组件中，我设置了一个车轮监听的窗口侦听器，检查车轮是否在向上或向下移动，最后但并非最不重要的是导航到所需的路线.

In the app component, I set a window listener for wheel movement, check if the wheel is moving up or down, and last but not least navigate to the wanted route.

constructor( private router: Router ) { } @HostListener('window:wheel', ['$event']) onWheelScroll(evento: WheelEvent) { // Scroll down if (evento.deltaY > 0) { switch (this.router.url) { case '/page1': { this.router.navigate(['/page2']) break } case '/page2': { this.router.navigate(['/page3']) break } case '/page3': { break } } } else { // Scroll up switch (this.router.url) { case '/page1': { break } case '/page2': { this.router.navigate(['/page1']) break } case '/page3': { this.router.navigate(['/page2']) break } } } }

这只是许多解决方案之一.

This is just one of many solutions.

如果您希望仅在滚轮在组件内部滚动时才发出事件，您也可以这样做:

If you want that the event is emitted only if the wheel is scrolled inside the component you can do like this too:

introductionponent.ts

HostListener('wheel', ['$event']) onWheelScroll(evento: WheelEvent) { // Scroll up if (evento.deltaY > 0) { this.router.navigate(['experience']) } }

experienceponent.ts

HostListener('wheel', ['$event']) onWheelScroll(evento: WheelEvent) { // Scroll down if (evento.deltaY > 0) { this.router.navigate(['education']) } else { // Scroll up this.router.navigate(['about']) } }

educationponent.ts

HostListener('wheel', ['$event']) onWheelScroll(evento: WheelEvent) { // Scroll up if (evento.deltaY < 0) { this.router.navigate(['experience']) } }