使用 HTML 锚点 link #id in Angular 6

Question

我正在处理一个 Angular 6 项目，其中我有 disabled/removed 哈希位置策略，它从 URL.

中删除了 #

由于此更改，link 具有：

<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

我一直在寻找类似的解决方案并尝试使用 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"});
  }

Answer 2

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

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

Answer 3

Angular 6.1 带有一个名为 anchorScrolling that lives in router module's ExtraOptions. As the anchorScrolling definition 的选项说：

Configures if the router should scroll to the element when the url has a fragment.

'disabled' -- does nothing (default).

'enabled' -- scrolls to the element. This option will be the default in the future.

Anchor scrolling does not happen on 'popstate'. Instead, we restore the position that we stored or scroll to the top.

你可以这样使用它：

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 4

使用ngx page scroll

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

Answer 5

出于可访问性的原因，我不得不在文档的开头添加一个 link 以向使用屏幕 reader 的用户提供对内容的直接访问，从而跳过页面重复的部分一页一页。

因为我需要 link 保持可聚焦（最好保持 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 6

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

解决此问题的一种方法是摆脱 routerLink 并在 *.component.ts 文件中使用 this.router.navigate 和 fragment 参数：

HTML -

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

打字稿-

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 7

这是针对 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 8

这对我有用（我正在使用 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"});
}

使用 HTML 锚点 link #id in Angular 6

Using HTML anchor link #id in Angular 6

html

anchor

routes

angular

hash-location-strategy