为什么我的 Angular 路由器链接会将我带到页面底部？

Question

我使用带有 SSR 和独立版本的 Angular 17，我有我的组件

challenges

。我有一个按钮，想要重定向到

editors

。但每次，我都会到达页面底部。

我尝试了很多解决方案都没有成功。

我的

challenges.html

<a target="_blank">
          <button (click)="router.navigate(['/editors']);" class="btn secondary-btn">{{ "common.discover" | translate }}</button>
        </a>

我的

editors.ts

isBrowser = false;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(this.platformId);

  }

  ngAfterViewInit() {
    if (this.isBrowser) {
      const element = document.querySelector('#editorpage');
      if (element) {
        element.scrollIntoView();
        console.log("Scrolled to #editorpage");
        element.scrollTop = 0;
      } else {
        console.log("#editorpage not found");
      }
    }
  }

我有一个

app.routes.ts

export const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'editors', component: EditorsComponent },
  { path: 'partners', component: PartnersComponent },
  { path: 'investors', component: InvestorsComponent },
  { path: 'telecoms', component: TelecomsComponent },
  { path: 'institutional', component: InstitutionalComponent },
  { path: 'universities', component: UniversitiesComponent },
  { path: 'influencers', component: InfluencersComponent },
  { path: 'ambassador', component: AmbassadorComponent },
];

和一个

configs.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideLottieOptions({
      player: () => import('lottie-web'),
    }),
    provideAnimations(),
    provideHttpClient(),
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        // useFactory: HttpLoaderFactory,
        useFactory: (http: HttpClient) => new CustomTranslateLoader(http),
        deps: [HttpClient]
      }
    }).providers!, provideClientHydration(), provideClientHydration(), provideClientHydration() ],
};

谢谢你。

Answer 1

用于重定向页面，顶部有滚动位置。请在 config.ts 页面上使用“scrollPositionRestoration”选项作为“top”。

请将config.ts页面上的provideRouter(routes)替换为provideRouter(routes,withInMemoryScrolling({scrollPositionRestoration: 'top' }))

请更改 configs.ts

上的以下代码

export const appConfig: ApplicationConfig = {  providers: [
provideRouter(routes, withInMemoryScrolling({ scrollPositionRestoration: 'top' })),
provideLottieOptions({
  player: () => import('lottie-web'),
}),
provideAnimations(),
provideHttpClient(),
TranslateModule.forRoot({
  defaultLanguage: 'en',
  loader: {
    provide: TranslateLoader,
    // useFactory: HttpLoaderFactory,
    useFactory: (http: HttpClient) => new CustomTranslateLoader(http),
    deps: [HttpClient]
  }
}).providers!, provideClientHydration(), provideClientHydration(), provideClientHydration() ]};