提问人：Jorge 提问时间：9/7/2023 更新时间：9/7/2023 访问量：29
按 ID 标记 <A>引用元素的引用问题 #element
a reference problem with tag <a> reference element by id #element
问：
请帮忙，
我的 HTML 文档中有一个 ID 的标签：
问题是，当我使用引用调用时，屏幕不会移动。引用调用：
我尝试两种方式，两者都不起作用：
方式1：
方式2：
请帮忙
我尝试两种方式
我期待别人的其他方式
答：
0赞
Eliseo
9/7/2023
#1
看到当你导入 RouterModule.forRoot 时，你可以添加一个 “routerOptions”
在此函数中，您可以包含 routerOptions
const routerOptions: ExtraOptions = {
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled', //<--this makes the trick
scrollOffset: [0, 64], //<--this is for not just in the anchor
};
const routes: Routes = [ ...]
@NgModule({
imports: [CommonModule, RouterModule.forRoot(routes, routerOptions)],
exports: [RouterModule]
})
export class AppRoutingModule { }
注：来源和鸣谢归 Quân Đỗ 所有。在此链接中，他展示了如何使锚点中的移动平稳，订阅 router.events 而不是使用 routerOptions
export class AppModule {
constructor(router: Router, viewportScroller: ViewportScroller) {
viewportScroller.setOffset([0, 50]);
router.events.pipe(filter(e => e instanceof Scroll)).subscribe((e: Scroll) => {
if (e.anchor) {
// anchor navigation
/* setTimeout is the core line to solve the solution */
setTimeout(() => {
viewportScroller.scrollToAnchor(e.anchor);
})
} else if (e.position) {
// backward navigation
viewportScroller.scrollToPosition(e.position);
} else {
// forward navigation
viewportScroller.scrollToPosition([0, 0]);
}
});
}
}
评论
0赞
Jorge
9/9/2023
Eliseo感谢您的帮助。我在 routing.module 中使用了配置。
评论