在Angular 11中,你可以使用RouterModule
和ScrollingModule
来实现路由和滚动到锚点。下面是一个示例:
首先,确保你已经安装了@angular/router
和@angular/cdk
依赖。
在你的模块文件中导入RouterModule
和ScrollingModule
,并将它们添加到imports
数组中:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
imports: [
RouterModule.forRoot(routes),
ScrollingModule
],
...
})
export class AppModule { }
routerLink
指令来导航到指定的路由:Go to Anchor
ViewportScroller
来滚动到指定的锚点。在构造函数中注入ViewportScroller
:import { ViewportScroller } from '@angular/common';
@Component({
...
})
export class YourComponent {
constructor(private viewportScroller: ViewportScroller) { }
scrollToAnchor(anchor: string) {
this.viewportScroller.scrollToAnchor(anchor);
}
}
你可以在需要滚动到锚点的地方调用scrollToAnchor
方法来实现滚动。例如,你可以在组件的ngOnInit
方法中调用它:
ngOnInit() {
this.scrollToAnchor('your-anchor');
}
这样,当你导航到该组件时,页面将自动滚动到指定的锚点。