typescript - Angular - scrollPositionRestoration på bare én rute

Jeg vil deaktivere scrollPositionRestoration på én side. La oss si at jeg har følgende ruter i filen min app-routing.module.ts...

const appRoutes: Routes = [{ path: 'home', component: myComponent}, { path: 'about', component: myComponent}, ]

og jeg har mine importeringer som følger...

@NgModule({imports: [RouterModule.forRoot(appRoutes, {
    scrollPositionRestoration: 'enabled'
})]

Hvordan kan jeg deaktivere scrollPositionRestoration på 'about'-ruten?

Svar #1

Ikke bruk: scrollPositionRestoration: 'enabled'

Tilbakestill til:

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

Bruk deretter dette bare i din home.component.ts:

scrollTop() {
    window.scroll(0, 0);
  }

Legg deretter til (click)="scrollTop()" der du vil utføre det.

Svar #2

Du kunne ikke kontrollere scrollPositionRestoration-verdien forskjellig på ulike ruter. Dette alternativet gjelder kun for rotmodulen. Som et resultat, i ditt tilfelle bør du fjerne det fra rotmodulen (som standard er scrollPositionRestoration-verdien 'disabled') og kan kontrollere rulleposisjonen ved hjelp av Router og ViewportScroller. I app.component kan du lytte til navigasjonshendelser slik:

this.router.events.subscribe((e) => {
  if (e instanceof NavigationEnd) {
    // if (..) You can write any logic for moving the scroll to the top or not
    this.viewport.scrollToPosition([0, 0]);
  }
});

Relaterte artikler