Запретить добавление косой черты перед хэшем в Angular 7

Question

Я хочу добавить хеш в URL, чтобы перейти в определенный раздел. Мой код для доступа к разделу клиентов на этой странице

<a href="#customer">Customers</a>

Когда я нажму эту ссылку, URL будет обновлен, как показано ниже.

http://www.example.com#customer

Но Angular 7 добавляет косую черту / перед хешем # в URL через некоторую долю секунды, и URL станет таким.

http://www.example.com/#customer

Но страница остается прежней, хотя ее косая черта обновляется.

Проблема в том, что, когда я снова пытаюсь щелкнуть ссылку Cutomers, URL будет http://www.example.com # * клиент 1014 *

Таким образом, здесь произойдет несоответствие URL-адреса, так как после хэша при повторном нажатии не будет косой черты до хэша. поэтому он перезагружает страницу

Как предотвратить добавление косой черты перед хешем в угловых 7

Answer 1

По умолчанию прокрутка привязки не включена в Angular Router (после v.6.1.0).

Вы можете включить его, импортировав RouterModule следующим образом:

RouterModule.forRoot(routes, {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled'
})

Док: https://angular.io/api/router/ExtraOptions#anchorScrolling

Ваш якорь будет идентификатором div.

Использование

HTML:

<a [routerLink]="['somepath']" fragment="customer">Jump to 'customer' anchor </a>

TS:

 this.route.fragment.subscribe(f => {
    console.log("f ", f);
    const element = document.querySelector("#" + f)
    if (element) element.scrollIntoView()
  });

Другие решения.

Вы можете использовать динамическую прокрутку.

<div #customer>Customers</div> <button (click)="scrollToElement(customer)">Scroll</button>.

И в вашем файле ts:

scrollToElement(el) {
    el.scrollIntoView();
}

Или использовать ViewChild:

 @ViewChild("customer") customerElement: ElementRef;

this.customerElement.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });

Или используйте угловую библиотеку, например: https://www.npmjs.com/package/@nicky-lenaers/ngx-scroll-to