39

我正在使用一个 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 问题应该使用

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

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

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

4

8 回答 8

53

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

配置当 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)
于 2018-10-09T15:41:55.503 回答
26

我正在寻找类似的解决方案并尝试使用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"});
  }
于 2018-07-18T10:51:46.093 回答
5

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

因为我需要链接保持焦点（最好保持 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>
于 2019-08-15T15:38:16.037 回答
3

使用ngx 页面滚动

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>
于 2019-01-08T17:34:08.797 回答
3

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

解决此问题的一种方法是摆脱routerLink并this.router.navigate在*.component.ts文件中使用以下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
    });
}
于 2019-11-01T12:52:30.900 回答
2

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

您可以使用Locationin@angular/common获取当前路径。

假设您有以下带有要关注的 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';

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

干杯。

于 2020-07-02T21:04:02.697 回答
0

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

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

于 2018-09-08T09:41:12.047 回答
0

这对我有用（我使用的是 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"});
}
于 2021-12-30T17:49:15.360 回答