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

如何让Angular 2记住滚动位置?

在Angular 2中,可以通过以下步骤来实现记住滚动位置:

  1. 首先,需要在组件中引入@HostListener装饰器和Router模块,以便监听路由事件和导航事件。
代码语言:txt
复制
import { Component, HostListener } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
  1. 在组件类中,创建一个变量来存储滚动位置。
代码语言:txt
复制
export class YourComponent {
  scrollPosition = 0;
  // ...
}
  1. 使用@HostListener装饰器监听路由事件和导航事件,以便在页面滚动时保存滚动位置。
代码语言:txt
复制
export class YourComponent {
  // ...

  @HostListener('window:scroll', ['$event'])
  onScroll(event: any) {
    this.scrollPosition = window.pageYOffset;
  }

  @HostListener('window:unload', ['$event'])
  onUnload(event: any) {
    localStorage.setItem('scrollPosition', this.scrollPosition.toString());
  }

  // ...
}
  1. 在组件的ngOnInit生命周期钩子中,检查本地存储中是否存在滚动位置,并将其应用到页面。
代码语言:txt
复制
export class YourComponent implements OnInit {
  // ...

  ngOnInit() {
    const savedScrollPosition = localStorage.getItem('scrollPosition');
    if (savedScrollPosition) {
      window.scrollTo(0, parseInt(savedScrollPosition, 10));
    }
  }

  // ...
}

通过以上步骤,Angular 2可以记住滚动位置。当用户离开页面并返回时,页面将滚动到之前保存的位置。

请注意,这只是一种实现方式,具体的实现方式可能因项目结构和需求而有所不同。此外,还可以根据具体需求使用其他技术,如路由器事件、自定义指令等来实现滚动位置的记忆功能。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

  • 如何使用Angular CLI和PM2运行Angular应用程序

    在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。 这允许您在开发期间连续运行应用程序。...$ node -v $ npm -v 检查Node.js和NPM版本 第2步:安装Angular CLI和PM2 接下来,使用npm包管理器安装Angular CLI和PM2 ,如图所示。...终止正在运行的Angular App 第4步:使用PM2永远运行Angular项目 要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。...从浏览器访问Sysmon Angular App Angular CLI主页 : https : //angular.io/cli PM2主页 : http : //pm2.keymetrics.io/...在本指南中,我们展示了如何使用Angular CLI和PM2流程管理器运行Angular应用程序。

    2.9K40

    R语言ggplot2做柱形图如何起始位置不是0?

    R语言ggplot2做柱形图如何起始位置不是0?之前有人在公众号留言问过这个问题,当时自己没有思路,今天看到有人在公众号留言问 下面这个图如何实现。...dat01<-read_excel("data/20220601/20220601.xlsx") dat01 ggplot(data=dat01,aes(x=var1,y=var2))+ geom_col...(aes(fill=var1)) image.png 如果想起始位置不是0,我们准备数据集如下,增加一列起始位置 image.png 作图代码 dat02<-read_excel("data/...20220601/20220601.xlsx", sheet = "Sheet<em>2</em>") dat02 ggplot(data=dat02,aes(x=var1,xend...elevation gradient in China 的figure4 论文中没有找到原始数据,自己构造一份吧 只准备两个物种的数据 image.png 作图代码 library(ggplot2)

    82110

    页面回发后,页面自动滚动到指定位置的一种简单的方法

    就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。...博克园里的“最新评论”里的链接,点击后打开的页面会直接滚动到指定的评论而不是帖子一开始的位置。...很简单,在页面加载完毕之后执行这个js语句就可以了 document.getElementById("a001").click(); 等等,并不是每一次看这个页面都要自动滚动者这个标签上呀,...等等好像还有一个问题,如果在同一个页面里,需要根据不同的情况,跳到不同的位置怎么办呀。这个也简单。...我们多做几个 标签,标记多个位置,然后要跳到哪里就把对应的 标签的ID放在文本框里面。在稍微修改一下js函数就可以了。

    3.2K70

    如何Windows文件管理器滚动如macOS奶油般顺滑?

    最终效果 传统Windows管理器explorer.exe并不顺滑 传统Windows管理器位置为 C:\Windows\explorer.exe 使用鼠标滚轮滚动,并不顺滑 ?...使用鼠标滚轮滚动,并不顺滑 如何Windows管理器如macOS奶油般顺滑? 鼠标中键滚轮每转动一格,windows文件管理器就会移动相应的行数,注意这里是行数,而不是屏幕的最小单位,像素!...这意味着,如果你的鼠标中键滚轮滚动时有卡顿感,就无法Windows文件管理器更流畅。 ? 鼠标中键滚轮每转动一格 换鼠标 我寻找支持无卡顿流畅滚动的鼠标,最终找到了微软官方设计的一款鼠标arc ?...和新文件资源管理器(左侧)Files中的流畅效果对比~ 右侧的卡顿也能用,左侧的文件管理器如奶油般顺滑~ Files下载地址 https://zhaooolee.cowtransfer.com/s/7f2a93a0a9a64b...本文永久更新地址(欢迎来读留言,写评论): https://www.v2fy.com/p/2021-02-13-win-smooth-1613196399000

    1.7K10

    面试时,如何在1分钟内面试官记住自己?

    简单说来,包括以下几个原因: 1、面试官的技巧还不是很娴熟,使用面试的惯常流程; 2、通过自我介绍,判断求职者的基本素质(比如口头语言表达能力、逻辑能力等); 3、通过自我介绍,找到简历上缺失的或者不一致的细节...简言之,自我介绍的意义和价值就在于,通过简短的口头语言陈述,面试官初步了解你是一个什么样的面试候选人。 面试官在看什么 所有面试的职位是需要拥有相匹配的能力!...除了主持人、演员等特殊岗位,一般来说,面试官主要看以下两点: 1、看你的工作能力,能否胜任目标岗位的工作; 2、看你的沟通表达能力,能否快速融入团队。...如何做好自我介绍 先说核心内容 前面已经介绍了这一问题的考察点,那么接下来就对症下药,做一个高质量的自我介绍,给整场面试开一个好头。...上述的五个简单部分,2、3、4为主,前后两部分为辅助,再加上一些简单的寒暄的话语即可。 还有几个误区,需要大家绕开 自我介绍不是检查背诵能力,切勿千篇一律。

    54230

    html滚动条使用,以及页面有多个div块,如何body页面不使用滚动条,只在某个div内使用滚动

    2. scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色) scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color...滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色 我们通过几个实例来讲解上述的样式属性: 1.浏览器窗口永远都不出现滚动条 没有水平滚动条...或<body style="overflow:hidden"> 2.设定多行文本框的滚动条...举例: 2,页面有多个div块,如何...2,另外可能会出现关闭了整个body的滚动条后,发现div的滚动即使启动了也没有显示,这种情况可能是没有设置此div的高度或宽度,这是需要设置的。

    4.6K30

    maven 本地仓库的配置以及如何修改默认.m2仓库位置

    默认仓库的存储位置 Maven缺省的本地仓库路径为${user.home}/.m2/repository 具体如下图 自定义修改仓库的存储位置: 可改变默认的 .m2 目录下的默认本地存储库文件夹...通过修改${user.home}/.m2/settings.xml 配置本地仓库路径 ,没有settings这个xml文件就新建,或者如下复制个;具体看图: 模板里面的配置项都是没有修改的。...简单易懂, 具体就是修改如下的Xml代码 自己仓库的存放目录,我的仓库已经移动到e盘了,具体看上面的那个图的箭头所指的位置 你也可以自己如下测试: 先备份自己的仓库文件即.m2目录下的repository文件夹,然后把这个文件夹移动到其他地方,直接在c盘移动快(这个只为测试啦,要是测试OK...一般默认配置是这样的: 这样的话,你就修改他默认位置的setting.xml文件,就可以修改,本地仓库的地址啦 看到后面有override这个词,那么这个也是可以设置的。

    3.4K10

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    如果您已经下载了WijmoJS,则可以在Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters文件夹中找到此项目。...在我们的示例中,操作是在单独的选项卡中打开设计图面,并使用 Angular标记提供的上下文,以及源文件中该标记的位置。 现在单击链接以在相邻选项卡中打开设计器。...但是,您应该知道扩展会记住调用它的Angular标记的文档范围。 如果随后修改了原始源文件,则应重新访问CodeLens链接以刷新关联的设计器选项卡。...否则,如果您只是切换到设计器选项卡并单击“保存”,则更新可能发生在错误的位置。...设计器的独立命令会记住当前工作空间上下文中可视化设计界面的状态,即使您关闭并重新打开VS代码也是如此。

    5.4K40

    前端成神之路-WebAPIs07

    然后用盒子原来的位置 + 手指移动的距离 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子 (3) 离开手指 touchend: 注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault...案例:返回顶部 当页面滚动某个地方,就显示,否则隐藏 点击可以返回顶部 1.3.2.案例分析 滚动某个地方显示 事件:scroll页面滚动事件 如果被卷去的头部(window.pageYOffset )...前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端,也能开发移动端 前端常用的移动端插件有 swiper、superslide、iscroll等。...Bootstrap Bootstrap 是一个简洁、直观、强悍的前端开发框架,它 web 开发更迅速、简单。

    3.6K10

    「JavaScript 」动画基础 - 03

    然后用盒子原来的位置 + 手指移动的距离 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲: 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault(); 1.2. 移动端常见特效 1.2.1 案例: 移动轮播图 移动端轮播图功能和基本PC端一致。...案例:返回顶部 当页面滚动某个地方,就显示,否则隐藏 点击可以返回顶部 1.3.2.案例分析 滚动某个地方显示 事件:scroll页面滚动事件 如果被卷去的头部(window.pageYOffset )...前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端,也能开发移动端 前端常用的移动端插件有 swiper、superslide、iscroll等。...Bootstrap Bootstrap 是一个简洁、直观、强悍的前端开发框架,它 web 开发更迅速、简单。

    1.2K20
    领券