Использование якорной ссылки #id в Angular 6

Question

Я работаю с проектом Angular 6, в котором я отключил / удалил hash-location-стратегии, который удаляет # из URL.

благодаря этому изменению ссылка имеет:

<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.

Я нашел эту ссылку, которая должна решить проблему с помощью

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

который помещает #contactTypes в конец URL, но не прокручивается до верхней части браузера.

Источник: https://github.com/angular/angular/issues/6595

Answer 1

Angular 6.1 поставляется с опцией под названием achorScrolling который живет в модуле маршрутизатора 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)

Answer 2

Я искал подобное решение и попытался использовать пакет ngx-scroll-to и обнаружил, что он не работает в последней версии angular, поэтому решил поискать другой вариант и обнаружил, что мы можем использовать scrollIntoView

HTML код:

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

Код Ц:

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

Answer 3

Это сработало для меня (я использую Angular 12.1.3):

В HTML-шаблоне:

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

Передайте идентификатор элемента, к которому вы хотите прокрутить (без символа хэштега #) к функции.

Затем в Typescript используйте .scrollIntoViewчтобы браузер прокрутил до позиции этого элемента.

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

Answer 4

По причинам доступности мне пришлось перейти по ссылке в начале документа, чтобы предоставить пользователю прямой доступ к контенту с помощью программы чтения с экрана, пропуская таким образом части страницы, повторяющиеся от страницы к странице.

Поскольку мне нужна была ссылка, чтобы оставаться в фокусе (желательно с сохранением атрибута 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 5

Это для Angular 9, но я уверен, что это принесет пользу сообществу,

Вы можете использовать Location в @angular/common чтобы получить текущий путь.

Допустим, у вас есть следующий элемент с идентификатором для фокусировки

<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 6

Используйте прокрутку страницы ngx

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

Answer 7

Как указал Нитин Авула в комментарии, используя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
    });
}

Answer 8

Вам нужно использовать стратегию маршрутизации хэша, чтобы включить прокрутку хэша.

вам нужно дать второй аргумент в виде объекта типа RouterModule.forRoot ([],{useHash: true}}. Он будет работать.