我的侧边栏导航组件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.
推荐答案我的示例代码已启用
并在使用滚轮上下滚动时被激活,可以通过添加其他事件(例如,使用向上和向下箭头键)来实现与我相同的操作
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']) } }更多推荐
如何在Angular 7中使用“路由器导航"滚动?
发布评论