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

Angular 9每次更改都会滚动到路线顶部

Angular 9是一种流行的前端开发框架,它基于TypeScript构建,并由Google维护。它提供了一种结构化的方法来构建Web应用程序,并具有许多强大的功能和工具。

对于每次更改都会滚动到路由顶部的问题,可以通过以下方式解决:

  1. 使用Angular的内置路由器:Angular的内置路由器提供了一种方便的方式来管理应用程序的导航。在路由器配置中,可以设置scrollPositionRestoration属性为enabled,这样每次路由更改时,页面将自动滚动到顶部。示例代码如下:
代码语言:txt
复制
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. 使用滚动到顶部的自定义逻辑:如果你需要更多的控制权,可以使用Angular的Router服务来实现自定义的滚动到顶部逻辑。在每次路由更改时,可以调用window.scrollTo()方法将页面滚动到顶部。示例代码如下:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        window.scrollTo(0, 0);
      }
    });
  }
}

这样,每次路由更改时,页面都会滚动到顶部。

关于Angular 9的更多信息,你可以参考以下链接:

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

相关·内容

你也许不知道的浏览器的一些滚动行为

= 100; 注意:scrollTo跟scrollBy的参数是一样的,区别就是scrollBy滚动距离是相对与当前滚动条位置进行滚动✅ 效果对比如下: 很明显,前者就是把滚动高度设置成100,而后者是每次都增加...window.scrollTo(0, 999999); 注意:平滑滚动到顶部或者底部自己加参数或者属性即可✅ 3....函数节流 当你没加函数节流: window.addEventListener("scroll", () => console.log("我在我在!"))...: start; } } 效果如下: 仔细看会发现,我们松手的时候,会将最近的元素滚动到最右边(初始位置,对于Y轴来讲就是顶部,X轴则是右边) 也可以设置出现在中间: li { scroll-snap-align...还可以实现全屏滚动: 注意:该属性会在你滚动完之后再做处理,也就是说你可以一下子从图片1跳到图片9

2.9K20

Blazor 中的路由和路由模板

路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径的整个过程。毋庸置疑,当应用程序的位置以编程方式更改时,路由器也会启动。...路由器的实现是通过 SPA 框架(其中 Angular 最为出色)移动到客户端的。让我们花点时间对合并的 Angular 路由器和仍在使用的 Blazor 路由器中的功能进行简要比较。...例如,它不具备检查路由上的授权和创建在位置更改时执行视图转换的链接的功能。与 Angular 路由器不同,它在获取路由参数后无法异步运行解析步骤。...在上一示例中,两个路由指令都由文本组成,因此它们都进入最终容器的顶部区域,并按(相对)外观的顺序排序。 路由确实支持参数,并且在最终表中以比文本路由更低的优先级识别参数路由,因为它被视为不太具体。...下面是参数路线的示例: @page “/user/view/{Id}” 当 URL 包含后跟 /user/view/ 的服务器名称时,URL 模式匹配算法会触发此路由。

8.3K21

AngularDart 4.0 高级-生命周期钩子 顶

ngDoCheck 检测Angular无法或无法自行检测到的更改并采取相应措施。 在每次更改检测运行期间,立即在ngOnChanges和ngOnInit之后调用。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...在此示例中,每次父组件递增其输入计数器属性时,CounterComponent都会记录更改(通过ngOnChanges)。...DoCheck 使用DoCheck钩子来检测并处理Angular自己无法捕获的更改。 使用此方法检测Angular忽略的更改。...大部分初始检查都是由Angular在页面其他地方首次渲染(与数据无关)而触发的。 仅仅通过鼠标移动到另一个输入框就会触发一个呼叫。 相对较少的调用显示相关数据的实际变化。

6.2K10

点击按钮,回到页面顶部的5种写法

如果没有提供该参数,默认为true,使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果...hover效果,当鼠标移动到该元素上时,显示回到顶部的文字,移出时不显示   .box{ position:fixed; right:10px; bottom: 10px; height...浏览器不支持该方法,可以使用setTimeout来兼容 1、增加scrollTop的动画效果 使用定时器,将scrollTop的值每次减少50,直到减少到0,则动画完毕 <script...cancelAnimationFrame(timer); } }); } 2、增加scrollTo()动画效果 将scrollTo(x,y)中的y参数通过scrollTop值获取,每次减少...cancelAnimationFrame(timer); } }); } 3、增加scrollBy()动画效果 将scrollBy(x,y)中的y参数设置为-50,直到scrollTop为0,则回停止

2.4K30

angular面试题及答案_angular面试

angular每次销毁组件或指令之前调用,通常用于移除事件监听,退订可观察对象。...9....此功能用于更改模板上的输出;比如将字符串更改为大写并在模板上显示它。它还可以相应地更改日期格式。...angular路由器使用base href 作为组件、模板的基地址,开发期间,通常会在index.html所在目录中启动服务器,所以这个目录就是根目录,所以可以在index.html 的顶部添加<base...Angular的懒加载 默认情况下,在初始化的时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用懒加载 懒加载 : 通俗 的讲就是进入主模块之后,子模块不加载,等真正访问到子模块之后,再去加载

10.9K120

iOS实例——滑动列表展现隐藏顶部视图

引 项目中需要一个效果:下列表时顶部的自定义视图不移动,上移时隐藏顶部视图,提高列表的展现范围。...在此基础上海加了一个隐藏列表时的动态渐入渐出效果,如下: 实现 实现的要点是,顶部的视图要随着列表的滚动而滚动,且列表最上是可以滚动到屏幕顶部的,最下就是滚动到一个固定的位置就不再往下滚动了,至于渐变效果只要能控制滚动自然也能控制随着滚动去改变...这里我们利用UIView的一个Delegate:willMoveToSuperview:,它会在我们的视图被添加到父视图上时被调用,在这个代理方法中我们就添加对列表的contentoffset值的观察,每次这个值变化时就调用处理方法...在处理方法中我们要做两件事,第一件事是让顶部视图的高度随着列表移动而移动,但是要控制列表最高移动到的位置TOP和最低移动到的位置BOTTOM,这其实就是顶部视图的低端对应的Y值。...第二件事是让顶部视图随着移动而渐变,当移动到最高时彻底透明,移动到最低时不透明,这个alpha值也是根据移动的值来计算的: - (void)updateSubViewsWithScrollOffset:

1.8K10

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

*文件移动到src / heroes_component.*。 从导入路径中删除src /前缀。 将AppComponent类重命名为HeroesComponent(仅在本地重命名,仅在此文件中)。...将模板URL更改为heroes_component.html,并将样式文件更改为heroes_component.css。...name:路线名称(Heroes)。 它必须以大写字母开头以避免与路径混淆。 component(组件):此路由导航时到(HeroesComponent)时将被激活的组件。...Router outlet 如果您访问localhost:8080/#/heroes,路由器应该匹配英雄路线的URL并显示一个HeroesComponent。 ...这种方法需要对组件类进行以下更改: 导入angular_router。 在构造函数中注入路由器,以及HeroService。 通过调用路由器的navigate()方法来实现gotoDetail()。

17.5K30

linux(五)之vi编译器

仅键入命令:q时,如vi发现文本内容已被更改,将提示用户使用“:quit”命令退出。...$(即Shift+4):移动到当前行的结尾处 H(大写):使光标移动到屏幕的顶部 M(大写):使光标移动到屏幕的中间 L(大写):使光标移动到屏幕的底部 Ctrl+b:上一屏。...Ctrl+f:下一屏。 Ctrl+d:下半屏。 Ctrl+u: 上半屏。...通过在命令模式下输入i,在光标的左边插入文本 通过在命令模式下输入I,在行首插入文本 3.2.3、插入新行     输入o,在当前光标位置下面打开一行 输入O,在当前光标位置上面打开一行 3.3、撤销更改...撤消对一行的更改:输入U来撤消你对一行所做的所有更改,这个命令只有在你没将光标移动到该行以外时才生效。

3K80

浅谈Hooks&&生命周期(2019-03-12)

ngOnInit()在一个或多个数据绑定输入属性发生更改 之前和之后调用。 ngOnInit() 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。...ngOnChanges() ngDoCheck() 检测Angular无法或不会自行检测的更改并对其进行操作。在每次更改检测运行期间,在ngOnChanges()和之后立即调用ngOnInit()。...Counter 被渲染的时候,这个 useState 调用都会被执行,useState 自己肯定不是一个纯函数,因为它要区分第一次调用(组件被 mount 时)和后续调用(重复渲染时),只有第一次才用得上参数的初始值...,都会调用这个函数参数,这样就达到了 componentDidMount 和 componentDidUpdate 一样的效果。...://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%

3.2K40

如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

将此目录移动到服务器的Web根目录。...将文本光标移动到下一个字段时,不会显示纬度和经度标签,地图上显示的位置也不会更改以反映您输入的信息。让我们启用这些行为。 第6步 - 添加事件监听器 向应用程序添加交互元素有助于保持用户的参与。...常见事件的例子有: 单击HTML按钮 更改输入字段的内容 将焦点从一个页面元素更改为另一个页面元素 一个事件监听器是一个指令,它讲述了一个程序在特定事件发生采取某种行动。...每当用户单击Generate按钮时,index.php文件中的代码都会提交表单并调用该processForm函数,该函数在以下createDigitalAddressApp.js位置定义: . . ....address={$address}&key=ExampleAPIKeyH2vITfv1eIHbfka9ym634Esw7u"; . . .

13.1K20

打造聊天框丝滑滚动体验:AI 聊天框的翻转之道

我们需要开发一个类似微信聊天框的交互体验:每当聊天框中展示新消息时,需要将聊天框滚动到底部,展示最新消息。...如果在 web 什么也不做,聊天体验可能是这样的,需要用户手动滚动到最新消息:试想一下如何在 web 中实现微信的效果。每当聊天框中接收到新消息时,都需要调用滚动方法滚动到消息底部。...如果仍使用 scrollIntoView 来滚动到底部,就需要监听消息体的变化,每次消息更新时都要通过 JavaScript 调用一次滚动方法,会造成一些问题:频繁的 JavaScript 滚动调用。...滚动条怎么跑到左边,并且滚动行为和鼠标滚轮的方向反了,滚轮向上,聊天框却向下。...以上两种方法都存在一个相同的问题,当一开始聊天消息还很少时,聊天消息也会紧贴着底部,顶部会留出一片空白。

1.2K21

基于JS实现回到页面顶部的五种写法(从实现到增强)

如果没有提供该参数,默认为true   使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果...【1】显示增强   使用CSS画图,将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器,则用图片代替)   使用CSS伪元素及伪类hover效果,当鼠标移动到该元素上时,显示回到顶部的文字,移出时不显示...定时器又有setInterval、setTimeout和requestAnimationFrame这三种可以使用,下面使用性能最好的定时器requestAnimationFrame来实现   [注意]IE9-...浏览器不支持该方法,可以使用setTimeout来兼容   1、增加scrollTop的动画效果   使用定时器,将scrollTop的值每次减少50,直到减少到0,则动画完毕 var...); } }); } 3、增加scrollBy()动画效果   将scrollBy(x,y)中的y参数设置为-50,直到scrollTop为0,则回停止

5.1K21

Ng-Matero 0.1 发布了!

按照计划,首先要添加 schematics,也就是使用 angular cli 自动初始化项目。然后花了一周多的时间终于搞定了 schematics?。...切记在新建 angular 项目的时候一定要选择 scss,因为没有做兼容处理,选择其它格式会有点问题,可以在 angular.json 中修改主样式入口。...个人更倾向于在项目之前初始化布局,而不是项目启动后再更改页面布局的参数。 ? 页面布局分为侧边栏导航和顶部导航两种,其它细节可以根据自己的需要自由选择配置。 侧边栏导航 ? 顶部导航 ?...这里说明一下,一旦发布正式版,则版本号会与 ng 对齐,可能是 8.x,也可能是 9.x,这要看项目开发的进度了,大家不要对版本号感到吃惊。...虽然使用 angular cli 的 ng generate 功能已经非常方便,但在添加惰性模块时,还是需要手动设置很多地方,所以自定义 ng generate 还是很有必要。

64910

11 个高级 Vue 编码技巧

我还用它来制作自动面包屑以显示用户的路线历史。在此下方(此处未显示)我还有一个单独的部分,允许侧边栏切换到使用从 API 发送的一组路由。...例如,假设你想设置一个类,但仅当用户位于三个特定路线中的任何一个时。...5、路线更改时滚动到顶部更改路线ni时,Vue 会保持在页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望的顶部。...只需在 app.js 文件中添加一个 watch: 在每次路由更改后触发滚动到顶部: // In App.vue watch: { $route() { window.scrollTo...,则会将光标焦点设置到以下输入框: <input type="text" @keyup.enter="$event.target.nextElementSibling.focus()" /> 9

2.6K30

10个关于 Vue 的高级开发技巧

我还用它来制作自动面包屑以显示用户的路线历史。 在此下方(此处未显示)我还有一个单独的部分,允许侧边栏切换到使用从 API 发送的一组路由。...例如,假设你想设置一个类,但仅当用户位于三个特定路线中的任何一个时。...5、路线更改时滚动到顶部更改路线ni时,Vue 会保持在页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望的顶部。...只需在 app.js 文件中添加一个 watch: 在每次路由更改后触发滚动到顶部: // In App.vue watch: { $route() { window.scrollTo...$router.go(0) 9、从父组件调用子组件的方法 通常,父组件通过 props 将数据向下发送给子组件,子组件通过 $emit 事件向上发送给父组件。

6K20
领券