Question

我已经在routingModule和所有路径中启用了anchorScrolling，但是当我单击链接时，什么也没发生。

'nav-bar.component.html'

<div id="mySidenav" class="sidenav" #sidenav>
   <a href="javascript:void(0)" class="closeBtn" 
   (click)="closeNav()">&times;</a>
   <a routerLink="/hazyMinds" [fragment]="'HazyMinds'">HazyMinds</a>
   <a routerLink="/ourGames" [fragment]="'Games'">Our Games</a>
   <a routerLink="/contact" [fragment]="'Contact'">Contact</a>
</div>
<span id="openNavBtn"  (click)="openNav()" #openBtn>&#9776;</span>

'app.component.html'

<app-nav-bar></app-nav-bar>
<app-hazy-minds id="HazyMinds"></app-hazy-minds>
<app-games id="Games" ></app-games>
<app-contact id="Contact"></app-contact>
<router-outlet></router-outlet>

'app-routing.module.ts'

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import {ContactComponent} from './contact/contact.component';
import {GamesComponent} from './games/games.component';
import {HazyMindsComponent} from './hazy-minds/hazy-minds.component';

const routes: Routes = [
  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: 'hazyMinds', component : HazyMindsComponent},
  {path: 'ourGames', component : GamesComponent},
  {path: 'contact', component : ContactComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 64]
    }),
    CommonModule
  ],
  exports: [
    RouterModule
  ]
})


export class AppRoutingModule { }

我希望当我单击链接时，它会自动滚动到正确的锚点。
有人知道我的代码有什么问题吗？谢谢

Answer 1

因此，在最新的Angular上我花了一个小时的时间，其他解决方案可以进行初始导航，但无论如何，我都无法通过锚点滚动来处理导航历史。

换句话说，当我在浏览器中“后退”或“前进”时，URL会更新，但我无法使Angular滚动到正确的位置。从日志记录来看，Angular在回退/前进时实际上并没有确认该片段，因此没有触发滚动。

我受够了，决定订阅URL，并在找到片段时手动滚动，这是代码：

ngOnInit() {
  this.router.events.subscribe(val => {
    if (val instanceof NavigationEnd) {
      let fragmentIdx = val.urlAfterRedirects.lastIndexOf('#');
      if (fragmentIdx >= 0 && fragmentIdx < val.urlAfterRedirects.length - 1) {
        let fragment = val.urlAfterRedirects.substring(fragmentIdx+1);
        console.log('fragment: ' + fragment);
        document.getElementById(fragment).scrollIntoView();
      }
    }
  })
}

为清楚起见，您必须为要滚动到的目标元素指定id。

此外，这是我的链接的外观（用于初始导航）：

<a routerLink="." fragment="anchor-name">Scroll To Anchor</a>

现在，我可以回访不同的锚点，并在回溯历史时看到滚动。希望它能对某人有所帮助！

编辑：

我已经使用一种方法将其重构为它自己的服务，该方法可以从任何要锚定滚动的页面/组件的ngOnInit中调用。我将主应用程序模块中的设置更改为默认设置，因为这实际上是手动操作。

这是服务：

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AnchorScrollerService {

  constructor(private router: Router) { }

  listen() {
    this.router.events.subscribe(val => {
      // console.log(val);
      if (val instanceof NavigationEnd) {
        let fragmentIdx = val.urlAfterRedirects.lastIndexOf('#');
        if (fragmentIdx >= 0 && fragmentIdx < val.urlAfterRedirects.length - 1) {
          let fragment = val.urlAfterRedirects.substring(fragmentIdx+1);
          // console.log('fragment: ' + fragment);
          document.getElementById(fragment).scrollIntoView();
        }
      }
    })
  }
}

现在只需在页面的listen中调用ngOnInit()：

ngOnInit() {
  this.anchorScrollerService.listen();
}

此外，请记住，最新的Chrome浏览器在初次导航时看到了一个锚定滚动错误。随后的导航/历史记录工作正常，例如在Firefox中，一切都很完美。值得一提的是，如果您遇到Chrome浏览器的挫败感...您并不孤单！

Answer 2

您可以为此使用片段：

MoreAccurateFunctor

//

this.router.navigate(['/results'], { fragment: 'top' });

https://angular.io/api/router/NavigationExtras

如何导航到Angular 7中的锚点

2 个答案: