Angular 利用路由跳转到指定页面的指定位置方法

在Angular应用中，有时我们需要不仅跳转到特定的页面，还需要在页面加载后直接定位到页面的某个具体位置。这通常涉及到路由（routing）和页面滚动（scrolling）的结合。本文将详细介绍两种方法，帮助你实现Angular中的路由跳转到指定页面的指定位置。 方法一：新增路由地址来实现 在这种方法中，我们通过在路由配置中添加一个带有哈希（#）的路径来实现目标。在`app.route.ts`中，我们新增一个路径`'detail#readMore'`，并将其指向`NotFoundComponent`。这样做是因为在实际的`DetailComponent`中，我们并不需要这个哈希路径，而是用来触发页面滚动的行为。然后，在`app.component.ts`中，当点击“ReadMore”按钮时，我们调用`router.navigateByUrl('/detail#readMore')`。在`detail.component.ts`的`ngOnInit`中，我们检查当前窗口的哈希是否为`#readMore`，如果是，则使用`window.location.assign('detail#readMore')`再次触发页面跳转，从而实现滚动到指定位置。 ```typescript // app.route.ts { path: '', component: LoginComponent }, { path: 'detail', component: DetailComponent }, { path: 'detail#readMore', component: NotFoundComponent }, { path: '**', component: NotFoundComponent } // app.component.ts readMore() { this.router.navigateByUrl('/detail#readMore'); } // detail.component.ts ngOnInit() { if (window.location.hash === '#readMore') { window.location.assign('detail#readMore'); } } ``` 方法二：在原路由地址不变的情况下，利用路由传递参数来实现 如果不想改变原有的路由结构，可以通过在`router.navigate`时传递参数来实现。在`app.component.ts`中，我们调用`router.navigate(['/detail', { id: 'readMore' }])`，传入一个包含`id`的参数。然后在`detail.component.ts`中，通过监听`ActivatedRoute`的`params`来获取这个参数。当`id`为`'readMore'`时，我们同样使用`window.location.assign('detail#readMore')`来滚动到指定位置。 ```typescript // app.component.ts readMore() { this.router.navigate(['/detail', { id: 'readMore' }]); } // detail.component.ts this.myActivatedRoute.params.subscribe( (data: any) => { if (data.id === 'readMore') { window.location.assign('detail#readMore'); } } ); ``` 两种方法的共同点在于，它们都是通过检查URL中的哈希值或参数来确定是否需要滚动到特定位置。区别在于，第一种方法通过修改路由结构，第二种方法则是在保持路由不变的情况下，通过参数传递信息。根据项目的具体需求和结构，你可以选择适合的方法。 总结，Angular中实现路由跳转到指定页面的指定位置，可以通过扩展路由路径或使用参数传递信息，结合`window.location`对象来控制页面滚动。这种方法在处理多页面应用时非常有用，能够提供更好的用户体验，让用户在跳转后直接看到他们感兴趣的内容。