首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当用angular 11导航回到上一页时,如何保持滚动到的位置?

在使用Angular 11导航回到上一页时,要保持滚动到的位置,你可以使用ScrollPositionRestoration选项来实现。

首先,在你的路由模块中,确保导入RouterModuleRoutes,然后设置你的路由配置。在RouterModule.forRoot()方法中,将scrollPositionRestoration设置为enabled,这样就可以启用滚动位置的恢复。示例如下:

代码语言:txt
复制
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Scroll } from '@angular/router';

const routes: Routes = [
  // 路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

接下来,在你的组件中,如果你需要导航回上一页,并保持滚动位置不变,可以使用Location服务的back方法结合Scroll服务来实现。在组件中导入LocationScroll

代码语言:txt
复制
import { Location } from '@angular/common';
import { Scroll } from '@angular/router';

@Component({
  // 组件配置...
})
export class YourComponent {

  constructor(private location: Location, private scroll: Scroll) { }

  goBack() {
    this.location.back();
    this.scroll.scrollToPosition([window.scrollX, window.scrollY]);
  }
}

goBack方法中,调用location.back()方法来导航回上一页,然后使用scroll.scrollToPosition()方法将滚动位置设置为之前的位置。

这样,当你使用goBack方法导航回上一页时,滚动位置就会得到保持。

希望这些信息能够帮助到你!如果你有任何其他问题,欢迎继续提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 英雄之旅-教程-07路由 顶

当用户在任一视图中点击英雄名称时,导航至所选英雄的详细视图。 当用户点击电子邮件中的深层链接时,打开特定英雄的详细视图。 完成后,用户将可以像这样浏览应用程序: ?...RouterLink指令告诉路由在用户点击链接时的位置。 您使用链接参数列表定义了一个路由指令, 这个列表在我们的小样本中只有一个元素,引用的路由名称。...选择一个仪表板英雄 当用户选择仪表板中的英雄时,应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。...当用户从列表中选择一个英雄时,他们不会进入详细页面。 相反,他们会在此页面上看到一个迷你细节,并且必须单击一个按钮才能导航到完整的详细信息页面。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。

17.6K30

AngularDart 4.0 高级-路由概述 顶

大部分内容都是准确的,但样本仍在改进和增强。 欢迎反馈。 当用户执行应用程序任务时,Angular路由器支持从一个视图导航到下一个视图。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源的其他刺激时,您都可以进行命令式导航。并且路由器在浏览器的历史记录中记录活动,所以后退和前进按钮也起作用。...路由,请提醒您需要做什么: 选择一个位置策略。...RouteDefinition 定义路由如何根据URL模式导航到组件。 Route 一种RouteDefinition。 定义路由器如何根据URL模式导航到组件。...危机详情显示在列表下方的同一页面上的子视图中。 改变危机的名称。 请注意危机列表中的相应名称不会更改。 ?

6.1K20
  • Android 自定义 ViewPager 打造千变万化的图片切换效果

    时间长了,ViewPager的切换效果觉得枯燥,形成了审美疲劳~~我们需要改变,今天教大家如何改变ViewPager切换时的效果,实现个性化的图片切换~~ 看一下这样效果的图片切换: 是不是比传统的效果个性很多...的方法~~ 没错就是这个方法:在页面滚动时调用~ 下面仔细研究下这几个参数: 直接说测试结果: 在非第一页与最后一页时,滑动到下一页,position为当前页位置;滑动到上一页:position为当前页...-1 positionOffset 滑动到下一页,[0,1)区间上变化;滑动到上一页:(1,0]区间上变化 positionOffsetPixels这个和positionOffset很像:滑动到下一页,...[0,宽度)区间上变化;滑动到上一页:(宽度,0]区间上变化 第一页时:滑动到上一页position=0 ,其他基本为0 ;最后一页滑动到下一页 position为当前页位置,其他两个参数为0 豁然发现...那么滑倒上一页:左边的View : map.get(position) , 右边的View : map.get(position+1) , 一样的,因为滑到上一页,position为当前页-1 好了,至此

    53110

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时,Angular...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...ii. component:当导航到此路由时,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...的服务,用来与浏览器打交道,this.location.back() 返回上一页 HTTP a....本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时,Angular...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...ii. component:当导航到此路由时,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...的服务,用来与浏览器打交道,this.location.back() 返回上一页 HTTP a....本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    3.7K50

    UI设计中的基本动效,值得收藏一波

    指向型动效的分类 1.滑动 信息列表会跟随着用户的交互手势而动,然后卡片到相应的位置上,保持整齐感,它属于指向型动画,物体的滑动取决于用户是用那种手势滑动的。...它的优点是能清楚的告诉用户点击的地方被放大了。 ? 3.最小化 页面元素点击之后缩小,然后移动到屏幕上相应的位置,相反的动效就是扩大,从缩略图重新变为全屏。...例如一个功能里面隐藏了好几个二级功能时,就可以使用这样的效果,利于用户引导。 6.翻页效果 适合场景:当用户进行一些翻页操作时。...例如看小说,读长篇文章,使用这样的效果会更贴近现实生活,引起用户共鸣。 7.添加到列表 适合场景:当用户需要进行新操作时。...10.滚动 适合场景:当用户垂直或者水平移动页面时。例如列表,图片,很多场景下都可以使用,也因此过于平凡,可以加一些动效让页面活起来。 11.平移 适合场景:移动大于界面的的页面。

    2.2K10

    ItemTouchHelper 实现交互动画

    当View被滑动删除的时候 onSelectedChanged 当item被拖拽或侧滑时触发 03.简单实现思路 几个方法中代码思路 要想达到上面功能需求,在...在onMove方法中处理拖拽的回调逻辑,那么什么时候被调用?当Item被拖拽排序移动到另一个Item的位置的时候被调用。在onSwiped方法当Item被滑动删除到不见中处理被删除后的逻辑。...上下拖动时与其他item进行位置交换 ItemTouchHelper.Callback本身不具备将两个item互换位置的功能,但RecyclerView可以,我们可以在item拖动的时候把当前item与另一个...); /** * 当两个Item位置互换的时候被回调 * * @param srcPosition 拖拽的item的position...23.RecyclerView滑动冲突 01.如何判断RecyclerView控件滑动到顶部和底部 02.RecyclerView嵌套RecyclerView 条目自动上滚的Bug 03.ScrollView

    3.9K20

    Angular 从入坑到挖坑 - 路由守卫连连看

    一、Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实现对于特性模块的惰性加载...UrlTree:取消当前的导航,并导航到路由守卫返回的这个 UrlTree 上(一个新的路由信息) 4.2.1、CanActivate:认证授权 在实现路由守卫之前,可以通过 Angular CLI...4.2.3、CanDeactivate:处理用户未提交的修改 当进行表单填报之类的操作时,因为会涉及到一个提交的动作,当用户没有点击保存按钮就离开时,最好能暂停,对用户进行一个友好性的提示,由用户选择后续的操作...; } } 这里模拟判断用户有没有修改原始的数据,当用户修改了数据并移动到别的页面时,触发路由守卫,提示用户是否保存后再离开当前页面 ?...这里的问题与配置通配路由需要放到最后的原因相似,因为脚手架在帮我们将创建的模块导入到 app.module.ts 中时,是添加到整个数组的最后,同时因为我们已经将 crisis 模块的路由配置移动到专门的

    3.8K30

    零基础微信小程序开发——页面导航之声明式导航(保姆级教程+超详细)

    这个组件类似于Web开发中的标签,用于创建一个链接,当用户点击这个链接时,就会触发页面跳转。 在组件中,可以通过设置相关属性来指定跳转的目标页面、跳转方式等。..."/pages/message/message",这意味着当用户点击这个导航按钮时,他们将被导航到pages/message/message这个tabBar页面。...delta属性: 这个属性用于指定要后退的层级数。 delta的值必须是数字,表示用户希望后退到之前访问过的第几个页面。例如,如果delta的值为1,则用户将返回到上一页面。...如果只是为了后退到上一页面,并且不需要指定具体的层级数,那么可以省略delta属性,因为其默认值就是1。...open-type=“navigateBack”:表示这个导航器的操作类型是返回(即导航回上一个或上几个页面)。

    15010

    AngularDart4.0 指南- 用户输入 顶

    ; } 当用户点击按钮时,Angular从ClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用的信息的有效载荷。...当用户按下并释放一个键时,会发生一个键盘事件,而Angular在$ event变量中提供一个相应的DOM事件对象,该代码将该代码作为参数传递给组件的onKey()方法。...然后,只有当用户按下Enter时,Angular才会调用事件处理程序。...失去焦点(blur)事件 在前面的示例中,如果用户在没有首先按下Enter的情况下单击页面上的其他位置,则输入框的当前状态将丢失。 只有当用户按下Enter时,组件的value属性才会更新。...下一页,Forms介绍了如何使用NgModel编写双向绑定。

    3.5K00

    windows10切换快捷键_Word快捷键大全

    + 向左键 将光标移动到上一个字词的起始处 Ctrl + 向下键 将光标移动到下一个段落的起始处 Ctrl + 向上键 将光标移动到上一个段落的起始处 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间切换...) Caps Lock + Ctrl + 向右键 转到下一个同级(仅当应用提供结构导航时) Caps Lock + Ctrl + 向左键 转到上一个同级(仅当应用提供结构导航时) Caps Lock +...Ctrl + 向下键 转到第一个子项(仅当应用提供结构导航时) Caps Lock + N 移动到主陆标 扫描模式键盘命令 快捷键 功能 向上键和向下键 移动到应用或网页中的下一行或上一行文本 向右键和向左键...Ctrl + 鼠标右键单击 – (将已选中的内容)移动到定位位置 选中任意内容,按住Ctrl键,鼠标右键单击某个位置,选中的内容会移动到相应位置。...Ctrl + G – 合并 同一页PPT中很多对象需要进行多项相同操作时,绝对是利器。

    5.5K10

    05Prism WPF 入门实战 - Navigation

    share\source=copy\web 本章分为以下三个部分来了解: Part1 视图导航、参数传递 Part2 确认导航 Part3 导航日志 2.详细内容 Part1 视图导航、参数传递 当用户与丰富的客户端应用程序交互时...例如,在许多应用程序中,用户可能会尝试在输入或编辑数据时进行导航。在这些情况下,您可能需要询问用户是否希望保存或丢弃在继续从页面中导航之前已输入的数据,或者用户是否希望完全取消导航操作。...} } Part3 导航日志 导航日志其实就是对导航系统的一个管理功能,理论上来说,我们应该知道我们上一步导航的位置、以及下一步导航的位置,包括我们导航的历史记录。...IRegionNavigationJournal接口有如下功能: GoBack() : 返回上一页 CanGoBack: 是否可以返回上一页 GoForward(): 返回后一页 CanGoForward...:导航到上一个 /// private void GoBackViewAction() { if (_navigationJournal.CanGoBack

    52420

    前端问答:如何解决固定头部遮挡内容问题

    在开发网页时,我们经常会遇到这样一个问题:当页面有固定在顶部的导航栏时,用户点击页面内的链接或按钮进行跳转时,目标内容可能会被固定导航栏遮挡住,导致用户看不到他们想要查看的内容。...当用户点击导航栏上的链接时,页面会滚动到对应的商品区块,但由于导航栏是固定的,跳转到的内容可能会被遮挡住。...这是一个非常简单却有效的属性,它允许我们在元素的顶部预留一些额外的空间,这样当页面滚动到该元素时,它不会被固定的导航栏挡住。 示例代码:解决遮挡问题 首先,我们来看一个简单的例子。...,我们希望页面滚动到商品编号20的位置: const targetProduct = document.querySelector('#product-20'); targetProduct.scrollIntoView...: 3rem; /* 导航栏高度大约是3rem */ } 这样,当页面滚动到商品20时,它会自动与导航栏保持一定的距离,不会被遮挡。

    12910

    fullPage.js全屏滚动插件

    anchors 的值对应后,菜单可以控制滚动 navigation (true/false)是否显示项目导航 navigationPosition (string) 项目导航的位置,可选 left...) 是否显示左右滑块的项目导航 slidesNavPosition (string)左右滑块的项目导航的位置,可选 top 或 bottom controlArrowColor (string)...左右滑块的箭头的背景颜色 loopBottom (true/false)滚动到最底部后是否滚回顶部 loopTop (true/false)滚动到最顶部后是否滚底部 loopHorizontal (true...() 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;nextIndex 是滚动到的“页面”的序号,从1开始计算...afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink

    15K20

    ArkUI滚动类组件-Scroll、Scroller

    Scroll 作为可滚动的容器类组件,它最多包含一个子组件,当子组件的布局尺寸在指定的滚动方向上超过 Scroll 的视图窗口时,子组件可以滚动, Scroll 滚动方向只支持水平滚动和竖直滚动。 ...Scroller 作为滚动组件的控制器,它可以控制滚动组件的一些行为,比如滚动到特定位置,滚动到边界等。...onScrollEdge:滚动到边缘事件回调。onScrollEnd:滚动停止事件回调。...Scroller简单介绍Scroller 作为滚动容器组件的控制器,它提供了滚动子组件的各种能力,比如设置子组件滚动指定位置、滚动到底部以及滚动到下一页上一页等能力。...scrollEdge:滚动到边界, Edge 提供了多种类型,读者可自行查阅。scrollPage:滚动到上一页或者下一页。currentOffset:获取当前滚动的偏移量。

    27610

    Visual Studio Code 快捷键 Mac 版

    ⌘] / ⌘[ 向左/向右 缩进当前行 Home / End 跳到当前行的头部,尾部 ⌘↑ / ⌘↓ 跳到当前行的开始,结束 ⌃PgUp 滚动到 ⌃PgDown 滚动到行头/行尾 ⌘PgUp /⌘PgDown...↑ 向上列(框)选择 ⇧⌥⌘↓ 向下列(框)选择 ⇧⌥⌘← 向左列(框)选择 ⇧⌥⌘→ 向右列(框)选择 ⇧⌥⌘PgUp 列(框)选择 向上一页 ⇧⌥⌘PgDown 列(框)选择 向下一页 搜索和替换...快速修复 ⇧F12 显示引用 F2 重命名符号 ⇧⌘. / ⇧⌘, 替换为下一个/上一个值 ⌘K ⌘X 修剪尾随空格 ⌘K M 更改文件语言 导航 Mac 快捷键 介绍 ⌘T 显示所有符号 ⌃G 转到行...切换选项卡移动焦点 编辑器管理 Mac 快捷键 介绍 ⌘W 关闭编辑窗口 ⌘K F 关闭文件 ⌘\ 拆分编辑窗口 ⌘1 / ⌘2 / ⌘3 聚焦到第1,第2,第3编辑器组中 ⌘K ⌘← / ⌘K ⌘→ 聚焦到上一个...⌘K 输入保持打开 ⌃Tab / ⌃⇧ 选项卡打开下一个/上一个 ⌘K P 复制活动文件的路径 ⌘K R 在资源管理器中显示活动文件 ⌘K O 在新窗口/实例中显示活动文件 显示 Mac 快捷键 介绍

    1.7K31
    领券