ng6.1 新特性:滚回到之前的位置

在之前的版本中滚动条位置是一个大问题,主要表现在

1. 使用快捷键或者手势前进/后退的时候,滚动条的位置经常是错乱的,所以只能每个页面都要重置一个滚动条的位置;

2. #anchor1 锚点位置无法定位

2017年10月开始解决这个问题,历时7个月终于在 6.1 beta1 中解决了。

解决方案就是增加了一个全新的特性 Scroll Position Restoration,滚回到之前的位置。

有人详细介绍了这个特性,点我查看

今天我尝试了一下 ViewportScroller 的 scrollToAnchor,跳转到锚点。

//注入 ViewportScrollerconstructor(private scroller: ViewportScroller) { }

async ngOnInit() {

//初始化数据之后,滚到 id=‘foot‘ 的元素那里

this.scroller.scrollToAnchor(‘foot‘);

}

在页面底部添加一个 id=‘foot‘ 的元素,注意要保证该元素超过浏览器的视野,不然就不会出现滚动条了,也就看不到效果了。

测试结果很成功,于是改成正式代码

 ngOnInit() {
   //初始化
    this.scroller.scrollToAnchor(this.route.snapshot.fragment);
 }

结果报错了

Uncaught (in promise): SyntaxError: Failed to execute ‘querySelector‘ on ‘Document‘: ‘#8e2c2c4e-3722-4645-bd12-af14da8cef96‘ is not a valid selector.
Error: Failed to execute ‘querySelector‘ on ‘Document‘: ‘#8e2c2c4e-3722-4645-bd12-af14da8cef96‘ is not a valid selector.

原来是 selector 选择器不正确,但是为什么不正确呢?看看它的实现就知道了。

// https://github.com/angular/angular/pull/20030/files+  scrollToAnchor(anchor: string): void {
+    if (this.supportScrollRestoration()) {
+      const elSelectedById = this.document.querySelector(`#${anchor}`);
+      if (elSelectedById) {
+        this.scrollToElement(elSelectedById);
+        return;
+      }
+      const elSelectedByName = this.document.querySelector(`[name=‘${anchor}‘]`);
+      if (elSelectedByName) {
+        this.scrollToElement(elSelectedByName);
+        return;
+      }
+    }
+  }

原来内部调用的是 querySelector,在 MDN 上看一下文档,原来必须是 css 选择器

Note: Characters that are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, be especially careful when writing string literals using these characters. See Escaping special characters for more information.

而我的代码里用的是 GUID,由于以数字开头,所以不符合语法规范。解决办法就很简单了,在它前面加一个字母就行了。

 ngOnInit() {
   //初始化
    this.scroller.scrollToAnchor(‘a‘+this.route.snapshot.fragment);
 }

别忘了在 HTML 模版中的锚点中也要加上这个字母。

原文地址:https://www.cnblogs.com/kexxxfeng/p/9297981.html

时间: 2024-10-13 15:18:40

ng6.1 新特性:滚回到之前的位置的相关文章

【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单

一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作,下面就具体看看编译器到底在背后帮我们做了哪些复杂的工作的. 二.同步代码存在的问题 对于同步的代码,大家肯定都不陌生,因为我们平常写的代码大部分都是同步的,然而同步代码却存在一个很严重的问题,例如我们向一个Web服务器发出一个

Elasticsearch之elasticsearch5.x 新特性

其实,elasticsearch5.x 和 elasticsearch2.x 并不区别很大. 是因为,ELK里之前版本各种很混乱,直接升级到5.0了. 其实,elasticsearch5.x 按理来说是elasticsearch3.x,只是为了跟随ELK整体版本的统一.   下面给大家介绍一下 5.0 版里面的一些新的特性和改进 5.0? 天啦噜,你是不是觉得版本跳的太快了. 好吧,先来说说背后的原因吧. 相信大家都听说 ELK 吧,是 Elasticsearch . Logstash . Ki

Java 8新特性之旅:使用Stream API处理集合

在这篇“Java 8新特性教程”系列文章中,我们会深入解释,并通过代码来展示,如何通过流来遍历集合,如何从集合和数组来创建流,以及怎么聚合流的值. 在之前的文章“遍历.过滤.处理集合及使用Lambda表达式增强方法”中,我已经深入解释并演示了通过lambda表达式和方法引用来遍历集合,使用predicate接口来过滤集合,实现接口的默认方法,最后还演示了接口静态方法的实现. 源代码都在我的Github上:可以从 这里克隆. 内容列表 使用流来遍历集合. 从集合或数组创建流. 聚合流中的值. 1.

Laravel 5.3将会有的新特性总结

Laravel地球上最好用的PHP框架,今天和大家分享的就是Laravel 5.3的相关特性,一起来看看吧. 据 Laravel 官方消息,Laravel 5.3 将在今年的 Laracon US 会议期间发布,这就意味着它将在 7 月的 28 号或者 29 号与大家见面.根据列在 Laracon 网站上的时间表,Taylor 将在 Louisville 当地时间 7 月 28 号下午 5:15 演讲,所有应该就会在那个时间.下面,带大家抢先看看 Laravel 5.3 即将带来的新特性. 1.

iOS 8新特性之扩展(Extension)

本文由海水的味道收集整理,欢迎转载 当前版本 0.0.1  iOS 8新特性之扩展 一.扩展概述 扩展(Extension)是iOS 8中引入的一个非常重要的新特性.扩展让app之间的数据交互成为可能.用户可以在app中使用其他应用提供的功能,而无需离开当前的应用. 在iOS 8系统之前,每一个app在物理上都是彼此独立的,app之间不能互访彼此的私有数据. 而在引入扩展之后,其他app可以与扩展进行数据交换.基于安全和性能的考虑,每一个扩展运行在一个单独的进程中,它拥有自己的bundle, b

Spring版本功能变更&Spring4.x的新特性

有朋友想知道Spring不同版本都有哪些功能变更,说直接在百度搜索找到的结果都不是想要的,其实还是关键词不对,找Spring不同版本的新特性就能获得更好的结果.其实在Spring工程github的wiki上也有说明,只是没那么显眼,放一个链接:https://github.com/spring-projects/spring-framework/wiki/What%27s-New-in-the-Spring-Framework What's New in Spring Framework 5.x

基于mysql5.6之GTID新特性的主从模式下的amoeba代理

系统:centos6.4 master:192.168.248.200 slave:192.168.248.201 amoeba:192.168.248.202 master: 为了方便选用的mysql为通用二进制:mysql-5.6.30-linux-glibc2.5-x86_64.tar.gz tar xf mysql-5.6.30-linux-glibc2.5-x86_64.tar.gz -C /usr/local/ ln -s mysql-5.6.30-linux-glibc2.5-x8

JS魔法堂:ES6新特性——GeneratorFunction介绍

一.前言       第一次看koajs的示例时,发现该语句 function *(next){...............} ,这是啥啊?于是搜索一下,原来这是就是ES6的新特性Generator Function(生成器函数). 那什么是生成器函数呢?其实就相当于C#2.0中通过yield关键字实现的迭代器生成器(细节有所不同),那么理解的关键就在yield关键字了.下面将尝试从表象出发,逐步对生成器函数及利用它进行异步编程进行浅层的分析理解. 二.语法及基本使用   示例: // 定义生

ADO.NET 新特性之SqlBulkCopy(批量插入大量数据)

转自:http://blog.csdn.net/huaer1011/article/details/2312361 在.Net1.1中无论是对于批量插入整个DataTable中的所有数据到数据库中,还是进行不同数据源之间的迁移,都不是很方便.而在.Net2.0中,SQLClient命名空间下增加了几个新类帮助我们通过DataTable或DataReader批量迁移数据.数据源可以来自关系数据库或者XML文件,甚至WebService返回结果.其中最重要的一个类就是SqlBulkCopy类,使用它