Перейдите к фрагменту ** другой ** (не той же) страницы / компонента в Angular

Question

Щелкнув ссылку, я хочу перейти к фрагменту другой страницы / компонента. Я не смог добиться этого, хотя пробовал несколько вещей:

Ссылка на сайт:

<a routerLink="/main/dash" fragment="dir">View</a>

Целевой html / шаблон:

<!-- Other elements -->

<app-dir id="dir"></app-dir>

Конфигурация роутера:

{
   path: 'main',
   component: LayoutComponent,
   children: [{
      path: 'dash',
         loadChildren: () => import('src/app/features/dash/dash.module').then(m => m.DashModule),
         canActivate: [AuthGuard]
   }]

   // Other code
}
   
// Other code

imports: [RouterModule.forRoot(appRoutes, { useHash: true, anchorScrolling: 'enabled', onSameUrlNavigation: 'reload' })],

При нажатии на ссылку "Просмотр" система переходит к /main/dashпуть / страница / компонент, но он не прокручивается до фрагмента с первого раза. Когда я нахожусь на домашней странице, когда я нажимаю на ту же ссылку навигации ("Просмотр", которая находится в заголовке), она прокручивается до фрагмента.

Т.е. AnchorScrolling работает, когда я уже нахожусь на той же странице / компоненте, но не, если источником является другая страница / компонент.

Я также пробовал использовать (click) & this.router.navigate() вместо использования routerLink - но результат тот же.

Я использую HashLocationStrategy.

Любая помощь будет оценена.

Благодарность!

Обновить:

Если копнуть еще глубже, я обнаружил, что маршрутизация фрагментов после загрузки страницы Angular - это именно та проблема, с которой я столкнулся. Кажется, решения пока нет?: https://github.com/angular/angular/issues/30139

Answer 1

У меня такая же проблема. Интересно, что при переходе на страницу с фрагментами она прокручивается вниз. Вот решение, которое сработало для меня:

В компоненте, который содержит фрагменты:

      /*...imports*/

export class ComponentWithFragmentsInTemplate implements OnInit, AfterViewInit {
  private fragment: string;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => {
      this.fragment = fragment;
    });
  }

  ngAfterViewInit(): void {
    setTimeout(() => { //I needed also setTimeout in order to make it work
      try {
        document.querySelector('#' + this.fragment).scrollIntoView();
      } catch (e) {
      }
    });
  }

Без пустого это не работает для меня.