Question

我正在使用Angular 6项目，其中我已禁用/删除了哈希位置策略，该策略从URL中删除＃。

由于此更改链接具有：

MyType1

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

我发现这个link应该使用

解决问题

MyClass1 Int

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

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

Answer 1

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 2

我在寻找类似的解决方案，并尝试使用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 3

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

由于我需要使链接保持焦点（最好保持href属性），因为实际上我在应用程序根目录或任何组件外部（仍然在组件内部运行解决方案），所以我使用了简单的老式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 4

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

您可以在Location中使用@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';

我确信这会对某人有所帮助：）

干杯。

Answer 5

使用ngx page scroll

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

Answer 6

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

您需要给第二个参数作为一个像RouterModule.forRoot（[]， {useHash：true} }之类的对象。它将起作用。

Answer 7

正如Nitin Avula在comment中指出的那样，仅在导航到其他路由或在路由器配置中启用routerLink时，才将onSameUrlNavigation用作哈希锚。

解决此问题的一种方法是摆脱routerLink，而在this.router.navigate文件中使用*.component.ts参数使用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
    });
}

在Angular 6中使用锚链接#id

7 个答案: