angular路由添加锚点

最新推荐文章于 2021-01-04 16:18:26 发布

原创最新推荐文章于 2021-01-04 16:18:26 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

angular2 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Angular应用中如何使用路由添加锚点，以实现在页面跳转后能返回到之前的位置。虽然这种方法可以让页面定位到特定的锚点标签，但存在一个问题：它无法精确滚动到原先的页面位置，而是以锚点标签顶部作为滚动基准。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当页面跳转后，再回来，依然是当初跳转过去的描点位置：

.html文件：在要跳转去其他页面标签上绑定点击事件，传参包括该标签上的id绑定值：

<li class="search-result-item" *ngFor="let item of lowyerList;index as i" [id]="'item' + i">
    <a (click)="goDetail(item.id, 'lawyer' + i)">item</a>
</li>

.ts文件引入路由对象并实例化：

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

export class Change implements OnInit {

  constructor(private route: ActivatedRoute,
    private router: Router) { }
  ngOnInit() { }
}

实现绑定事件

  // 跳转链接
  goDetail(id: string, fragment: string) {
    this.router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = this.router.parseUrl(this.router.url);
        // 点击时为本地址添加锚点
        tree['fragment'] = fragment;
        if (tree.fragment) {
             // 获取锚点标签
          const element = document.querySelector('#' + tree.fragment);
          // 滚动到锚点位置
          if (element) { element.scrollIntoView(true); }
        }
      }
    });
    // 路由跳转
    this.router.navigate(['***'], {
      queryParams: {
        id: id
      }
    });
  }

缺点：由于是添加锚点，页面滚动位置也是锚点所在标签，所以不能精确滚到当初页面完全相同位置。都是以该锚点标签置顶为标准滚动。