是否可以在滚动时更改路线(向下/向上)

Question

我有一个使用angular 4的应用程序。

我需要在滚动时更改路线。

这是我的代码。

app.routing.module.ts

 const routes: Routes = [
  { path: '', redirectTo: '/start', pathMatch: 'full' },
  { path: 'start', component: HomeComponent },
  { path: 'lazy', component: LazyComponent },
  { path: 'advanced', component: RestComponent },
  { path: 'basic', component: BasicComponent },
  { path: 'drilldown', component: DrilldownComponent },
  { path: 'styling', component: StylingComponent },
  { path: 'record-selection', component: RecordSelectionComponent },
  { path: 'totals', component: AggregateComponent },
  { path: 'custom-column', component: CustomColumnComponent },
  { path: 'column-click', component: ColumnClickComponent },
  { path: 'localization', component: LocalizationComponent },
  { path: 'inline-editing', component: InlineEditingComponent },
  { path: 'add-remove-edit', component: AddRemoveEditComponent },
  { path: 'column-settings-component', component: ChangeColumnSettingsComponent },
  { path: '**', component: HomeComponent }
];

我该怎么做呢？

Answer 1

我不确定这是否是推荐的功能，但它是可能的。我可以想到两种方法来解决这个问题。

1. 我会写一个指令，它使用HostListener装饰器检测滚动事件，检测所有滚动，如果滚动的增量超过某个特定值，就会触发导航。(我使用下面的代码片段在滚动条上折叠导航栏，并根据您的请求对其进行了修改)。

@Directive({
  selector: '[navigateOnScroll]'
})
export class NavigateOnScrollDirective implements OnDestroy {
  didScroll: boolean;
  lastScrollTop: number;
  navbarHeight: number;
  delta: number = 5; // set any value you wnat here
  interval: any;

  @HostListener('window:scroll', ['$event']) // this sets the listener to the scroll event
  track() {
    this.didScroll = true;
  }
  constructor(private router: Router, // import router for navigation purposes
              private el: ElementRef) {
    this.interval = setInterval(() => {
      if (this.didScroll) {
        this.hasScrolled();
        this.didScroll = false;
      }
    }, 250);
  }

  hasScrolled() {
    this.navbarHeight = this.el.nativeElement.offsetTop;
    const st = window.pageYOffset;
    // Make sure they scroll more than delta
    if (Math.abs(this.lastScrollTop - st) <= this.delta) {
      return;
    }
    // If they scrolled down and are past the navbar, add class
    // This is necessary so you never see what is "behind" the navbar.
    if (st > this.lastScrollTop && st > this.navbarHeight) {
      // Scroll Down
      this.router.navigate(['/your', 'path', 'here']);
    } else {
      // Scroll Up
      this.router.navigate(['/your', 'path', 'here']);
    }
    this.lastScrollTop = st;
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }
}

*我在写这篇文章时遵循了这篇文章，并为Angular 2+：https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c修改了它。

1. 编写一条指令，检查放置它的元素是否在DOM中，如果在DOM中，则触发导航。使用类似的代码，但将指令本身放在文件夹下的元素上。然后更改为逻辑，以测试元素从底部的偏移量是否大于0。我还没有尝试过这个功能，但是这个应该可以工作。

希望这能帮上忙，祝你好运！