6

单击链接时，我想导航到不同页面/组件的片段。即使尝试了多种方法，我也无法实现这一目标：

关联：

<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

4

1 回答 1

2

我有同样的问题。有趣的是，一旦导航到带有片段的页面，它就会滚动到底部。这是对我有用的解决方案：

在包含片段的组件中：

/*...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) {
      }
    });
  }

没有空setTimeout()它对我不起作用。

于 2021-12-13T14:02:12.447 回答