Блог

Главная - Вопросы по программированию - Как сделать навигацию по фрагментам угловой «маршрутной ссылки» прокруткой до моей цели «идентификатор»?

Как сделать навигацию по фрагментам угловой «маршрутной ссылки» прокруткой до моей цели «идентификатор»?

#angular #scroll #navigation #routerlink #angular-routerlink

Вопрос:

Может кто-нибудь, пожалуйста, помочь мне заставить свиток routerLink фрагментов работать?

=> >«Работает» означает, что, когда я нажимаю на ссылку маршрута, она прокручивается до элемента с соответствующим идентификатором. 😉

Пример кода того, что я сделал:

 <co-trigger routerLink="." [fragment]="item?.id" *ngFor="let item of items">Trigger</co-trigger>
...
<co-target [attr.id]="item?.id" *ngFor="let item of items">Target</co-target>

Примечания:

  • И co-trigger то, и co-target другое находятся в одном шаблоне.
  • В некоторых co-target экземплярах содержимого достаточно, чтобы была полоса прокрутки, позволяющая перейти к этому элементу, нажав на триггер.
  • URL-адрес на панели навигации изменяется , как и ожидалось url#item-id , однако прокрутки при нажатии на триггер не происходит.

Моя AppRoutingModule настройка:

 @NgModule({
  imports: [
    RouterModule.forRoot(
      routes,
      {
        onSameUrlNavigation: 'reload',
        anchorScrolling: 'enabled',
        scrollPositionRestoration: 'enabled',
        scrollOffset: [0, 64], // [x, y] - adjust scroll offset
      }
    ),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Контекстная информация:

 Angular: 11.2.6

Есть какие-нибудь идеи о том, что я могу сделать, чтобы заставить работать функцию «прокрутка до привязки цели«?

Комментарии:

1. Можете ли вы создать стекблитц?

Ответ №1:

Для этой цели я использую пакет с именем ngx-page-scroll.

Ответ №2:

Вы можете использовать что-то вроде этого.

Шаг 1

Таким образом, для каждого элемента вы можете определить метод, называемый прокруткой, следующим образом :

app.component.html

 <a class="nav-link" (click)="scroll(home)">Link Name</a>

Шаг 2

В том же компоненте app.component.html определите свой раздел с идентификатором #home следующим образом :

 <section #home>
...
</section>

Шаг 3

Теперь в app.component.ts вы можете реализовать метод прокрутки следующим образом :

 scroll(el: HTMLElement) {

  el.scrollIntoView({ behavior: 'smooth' });

}
Метки: