首页
学习
活动
专区
工具
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 好了,至此

    50310

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

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

    2.1K10

    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

    ItemTouchHelper 实现交互动画

    当View被滑动删除时候 onSelectedChanged 当item被拖拽或侧滑触发 03.简单实现思路 几个方法中代码思路 要想达到上面功能需求,在...在onMove方法中处理拖拽调逻辑,那么什么时候被调用?当Item被拖拽排序移动到另一个Item位置时候被调用。在onSwiped方法当Item被滑动删除到不见中处理被删除后逻辑。...上下拖动与其他item进行位置交换 ItemTouchHelper.Callback本身不具备将两个item互换位置功能,但RecyclerView可以,我们可以在item拖动时候把当前item与另一个...); /** * 当两个Item位置互换时候被调 * * @param srcPosition 拖拽itemposition...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

    android 有阻尼下拉刷新列表实现方法

    本文将会介绍有阻尼下拉刷新列表实现,先来看看效果预览: 这是下拉状态: ? 这是下拉松开手指后listView滚到刷新状态样子: ? 1....在onTouchEvent方法重载实现中,一开始PullToRefreshListView没有接受任何手势,然后当用户按下手指出发ACTION_DOWN事件,我记录下这个动作,然后当用户进行滑动,...在这个手势处理实现中,当用户在下拉过程中突然将PullToRefreshListView往上拉,如果将PullToRefreshListView 拉到不处于“滚动到顶部状态”,则重置下拉状态,使得...如何判断ListView是否已经滚动到顶部 下一步,我们如何判断ListView是否处于“滚动到顶部”状态呢?这一问题我PullToRefreshListViewonScroll中解决。...下拉后滚动画 最后,当下拉结束松开手指,我们需要为PullToRefreshListView执行一个动画,我们在onTouchEvent方法中看到: // ......

    3.5K10

    AngularDart4.0 指南- 用户输入 顶

    ; } 当用户点击按钮Angular从ClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用信息有效载荷。...当用户按下并释放一个键,会发生一个键盘事件,而Angular在$ event变量中提供一个相应DOM事件对象,该代码将该代码作为参数传递给组件onKey()方法。...然后,只有当用户按下EnterAngular才会调用事件处理程序。...失去焦点(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.3K10

    05Prism WPF 入门实战 - Navigation

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

    51520

    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:获取当前滚动偏移量。

    16110

    H5C3第四节

    导航小圆点位置,设置left或者right,默认是right navigationTooltips 小圆点提示信息,鼠标一上去能看到提示信息 showActiveTooltip 是否显示当前页面的导航...tooltip信息,默认是false slidesNavigation 是否显示横向幻灯片导航,默认为false slidesNavPosition 设置横向幻灯片位置,top或者bottom,默认...(anchorLink, index) 滚动到某一个section,当滚动结束后,会触发一次这个调函数,anchorLink是锚链接名称,index从1开始计算 onLeave(index,nextIndex...,diretion) 当我们离开一个section,会触发这个函数,index是离开页面的序号,从1开始计算。...) 页面滚动到某一个幻灯片时候会触发这个调函数 afterSlideLeave(anchor,index,slideIndex, diretion,nextSlideIndex) 当离开某一个幻灯片时候会触发一次这个调函数

    5.3K30

    DevOps 之 Coding CD

    对于生产环境部署,一般都很慎重,需要人工审批、部署后验证、以及部署失败后等操作。...后续步骤将根据本步骤的确认结果进行判断,如果确认通过,则继续部署广州四区,否则广州三区。...[continue-deploy-az4.png] 接下来添加回步骤,在 “GZ-AZ3 部署确认” 后添加一个新步骤,类型选择 “ (Manifest)”,并命名为“ GZ-AZ3” 。...[roll-back-basic.png] 继续 “ GZ-AZ3” 配置。接着就是配置回退版本数和条件表达式。回退版本数为 1 ,表示到上一个版本 docker 镜像。...发布单 上面介绍如何在部署控制台里配置发布流程,具体进行发布 coding 都会创建一个发布单记录每次发布过程以及发布结果,不管是自动触发还是手工触发部署。

    1.8K40
    领券