理解路由导航中的滚动行为
在 angular 应用中，当用户在不同路由之间导航时，如果前一个视图已经滚动到底部，默认情况下，新的视图可能会保持相同的滚动位置，而不是自动滚动到顶部。这在某些场景下会导致不佳的用户体验，例如用户期望在每次导航到新页面时都能从页面顶部开始浏览内容。对于使用 bootstrapapplication 构建的 angular 独立组件应用，我们需要明确配置路由才能实现理想的滚动恢复行为。
配置独立路由的滚动恢复
Angular 路由提供了强大的滚动恢复机制，允许开发者自定义路由导航时的滚动行为。对于独立组件应用，我们通过 provideRouter 函数的第二个参数来引入路由特性，其中就包括内存滚动特性 withInMemoryScrolling。
要实现路由导航时页面自动滚动到顶部，我们需要定义一个 InMemoryScrollingOptions 配置对象，并将其传递给 withInMemoryScrolling 函数。
import { provideRouter, withInMemoryScrolling, InMemoryScrollingOptions, InMemoryScrollingFeature } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component'; // 假设这是你的根组件
import { routes } from './app/app.routes'; // 假设这是你的路由配置
// 定义滚动配置
const scrollConfig: InMemoryScrollingOptions = {
scrollPositionRestoration: 'top', // 导航时将滚动位置恢复到顶部
anchorScrolling: 'enabled', // 启用锚点滚动，处理带有片段标识符的路由
};
// 创建内存滚动特性
const inMemoryScrollingFeature: InMemoryScrollingFeature =
withInMemoryScrolling(scrollConfig);
// 启动 Angular 应用并提供路由和滚动特性
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes, inMemoryScrollingFeature)
],
});关键配置选项解析
在上述配置中，InMemoryScrollingOptions 对象包含了两个关键属性，它们共同决定了路由导航时的滚动行为：
- scrollPositionRestoration: 此属性定义了路由导航时滚动位置的恢复策略。
- 'disabled' (默认值): 不恢复滚动位置，新页面会保持旧页面的滚动位置。
- 'top': 每次路由导航后，将滚动位置恢复到页面顶部。这是我们实现“滚动到顶部”目标所需的设置。
- 'enabled': 尝试恢复到上次访问该路由时的精确滚动位置。
- anchorScrolling: 此属性控制是否启用锚点（片段标识符）滚动。
- 'disabled' (默认值): 不处理 URL 中的片段标识符（如 #section）。
- 'enabled': 当 URL 包含片段标识符时，路由器会尝试滚动到具有匹配 ID 的元素。建议将其设置为 'enabled' 以确保完整的滚动行为管理。
完整示例
结合上述配置，一个完整的 Angular 独立组件应用的 main.ts 文件可能如下所示：
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withInMemoryScrolling, InMemoryScrollingOptions, InMemoryScrollingFeature } from '@angular/router';
import { environment } from './environments/environment';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes'; // 导入你的路由配置
if (environment.production) {
enableProdMode();
}
const scrollConfig: InMemoryScrollingOptions = {
scrollPositionRestoration: 'top',
anchorScrolling: 'enabled',
};
const inMemoryScrollingFeature: InMemoryScrollingFeature =
withInMemoryScrolling(scrollConfig);
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes, inMemoryScrollingFeature)
],
}).catch(err => console.error(err));注意事项与最佳实践
- 独立组件上下文: 此配置适用于使用 bootstrapApplication 启动的独立组件应用。对于基于 NgModule 的应用，滚动配置通常在 RouterModule.forRoot() 中完成。
- anchorScrolling 的影响: 将 anchorScrolling 设置为 'enabled' 会使得路由器在检测到 URL 片段时尝试滚动到对应的元素。如果你的应用不使用锚点链接，此设置可能影响不大，但通常建议启用以获得更全面的路由管理。
- 用户体验: 确保 scrollPositionRestoration 设置符合你的应用对用户体验的预期。对于大多数内容型网站，导航到新页面时自动滚动到顶部是更友好的行为。
- 官方文档: 建议查阅 Angular 官方文档中关于 InMemoryScrollingOptions、provideRouter 和 withInMemoryScrolling 的详细说明，以获取最新的信息和更深入的理解。
总结
通过在 bootstrapApplication 的 providers 中使用 provideRouter 结合 withInMemoryScrolling，并配置 scrollPositionRestoration: 'top' 和 anchorScrolling: 'enabled'，我们可以有效地解决 Angular 独立路由导航时页面滚动位置不重置的问题。这一简单的配置能够显著提升用户在应用中的导航体验，确保每次页面切换都能从一个清晰的起点开始。
