在 Angular 6 中使用 HTML 锚链接#id

Question

我正在处理一个 Angular 6 项目，在该项目中我禁用/删除了从 URL 中删除 # 的 hash-location-strategy。

由于此更改，链接具有：

<li routerLinkActive="active">
   <a [routerLink]="['/settings']">Contact Settings</a>
   <ul class="child-link-sub">
      <li>
         <a href="#contactTypes">Contact Types</a>
      </li>
   </ul>
</li>

不再起作用，它只是跳过当前组件 URL 并将 #contactTypes 放在 localhost 之后。

我发现这个github issue 应该可以解决这个问题

<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>

将 #contactTypes 放在 URL 的末尾，但不会滚动到浏览器的顶部。

来源：https://github.com/angular/angular/issues/6595

Answer 1

这对我有用（我使用的是 Angular 12.1.3）：

在 HTML 模板上：

<a (click)="scrollTo('anchorId')">Scroll to another position</a>

将要滚动到的元素的 ID（不带标签符号 #）传递给函数。

然后，在 Typescript 上，使用 .scrollIntoView 使浏览器滚动到该元素的位置。

scrollTo(element: any): void {
  (document.getElementById(element) as HTMLElement).scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

Answer 2

这是针对 Angular 9 的，但我相信社区会从中受益，

您可以在@angular/common 中使用Location 来获取当前路径。

假设您有以下带有要关注的 id 的元素

<div id="bring-me-to-the-focus">

我这里只展示提取的代码块。

import { Location } from '@angular/common';

constructor(private location: Location) { }

this.location.path() + '#bring-me-to-the-focus'; 

我相信这会对某人有所帮助:)

干杯。

Answer 3

正如 Nitin Avula 在 comment 中指出的那样，仅当您导航到不同的路由或在路由器配置中启用了 onSameUrlNavigation 时，使用 routerLink 作为哈希锚才有效。

解决这个问题的一种方法是去掉routerLink，而是在*.component.ts 文件中使用this.router.navigate 和fragment 参数：

HTML -

<a (click)="scrollToContactTypes()">Contact Types</a>

TypeScript -

constructor(private router: Router) { }

scrollToContactTypes() {
    this.router.onSameUrlNavigation = "reload";
    this.router.navigate(["/settings"], { fragment: "contactTypes" }).finally(() => {
        this.router.onSameUrlNavigation = "ignore"; // Restore config after navigation completes
    });
}

Answer 4

出于可访问性的原因，我不得不在文档开头提供一个链接，以便使用屏幕阅读器为用户提供对内容的直接访问，从而跳过页面中重复的页面部分。

因为我需要链接保持焦点（最好保留 href 属性），因为我实际上是在 app-root 或任何组件之外（仍然解决方案在组件内工作），为此我使用了简单的老式 html和javascript：

<a href="./#content"
     onclick="event.preventDefault(); location.hash='content';"
     class="content-shortcut"
     title="Access page content directly"
     i18n-title
     aria-label="Access page content directly"
     i18n-label>Access page content directly</a>
  <style>
    .content-shortcut {
      position: absolute;
      opacity: 0;
      height: 0px;
      font-size: 1px;
    }

    .content-shortcut:focus,
    .content-shortcut:active {
      position: relative;
      opacity: 1;
      height: auto;
      font-size: 1em;
      display: block;
      color: black;
      background: white;
    }

  </style>

Answer 5

Angular 6.1 带有一个名为anchorScrolling 的选项，它位于路由器模块的ExtraOptions 中。正如anchorScrolling definition 所说：

配置当 url 有片段时路由器是否应该滚动到元素。

'disabled' -- 什么都不做（默认）。

'enabled' -- 滚动到元素。此选项将在未来成为默认选项。

“popstate”上不会发生锚点滚动。相反，我们恢复存储的位置或滚动到顶部。

你可以这样使用它：

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

// then just import your RouterModule with these options

RouterModule.forRoot(MY_APP_ROUTES, routerOptions)

Answer 6

使用ngx page scroll

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>

Answer 7

您需要使用哈希路由策略来启用哈希滚动。

您需要将第二个参数作为 RouterModule.forRoot([],{useHash:true}} 之类的对象提供。它会起作用。

Answer 8

我正在寻找类似的解决方案并尝试使用 ngx-scroll-to 包，发现它在最新版本的 angular 中不起作用，因此决定研究其他选项并发现我们可以使用 scrollIntoView

HTML 代码：

<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>

Ts 代码：

  scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }