Question

我有一个使用角度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

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

我会编写一个指令，使用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

编写一个指令，检查放置它的元素是否在DOM中，如果是，则触发导航。使用类似的代码，但将指令本身放在折叠的元素上。然后更改为逻辑以测试从底部偏移的元素是否大于0.没有尝试过，但这应该有效。

希望这有帮助，祝你好运！

是否可以在滚动（向下/向上）上更改路线

1 个答案: