时间戳

首页 > 解决方案 > 如何解决无法读取 null 的属性 scrollIntoView？

angular - 如何解决无法读取 null 的属性 scrollIntoView？

问题描述

我创建了一个角度项目

.html 文件：

<a (click)="go()">toto</a>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis ex 
porttitor semper iaculis. Nam dapibus erat interdum, scelerisque magna et, finibus sapien. Aliquam tempus porta ante id rhoncus. Cras sit amet consequat tellus, at malesuada tellus. Vivamus et augue dolor. In consequat pretium massa in imperdiet. Donec sapien nulla, commodo sed est et, lacinia sodales augue. Curabitur sed neque vel quam consequat blandit. Curabitur rutrum commodo pretium. Maecenas posuere, nibh a ultricies laoreet, orci nibh fermentum ipsum, at auctor quam orci a massa. Duis varius, massa vel sollicitudin fermentum, augue lectus aliquam nibh, quis imperdiet purus arcu non orci. Mauris eget neque risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in ligula justo. In porta dui quis ligula varius pellentesque. Duis at mi lectus.

Nulla vel eros blandit, ornare eros id, ultricies felis. Quisque rutrum tincidunt felis, at dictum justo eleifend non. Mauris nec ex neque. Suspendisse quis porttitor diam. Cras feugiat purus sit amet felis tristique, at accumsan massa posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus varius mauris arcu, id tempus eros tempus non. Donec id risus dignissim, efficitur metus at, efficitur orci. Maecenas id odio sagittis, semper leo ac, ultricies sem.

Proin venenatis quis velit sed maximus. Donec aliquam orci id ante rhoncus dictum. Maecenas pretium venenatis elit, id bibendum odio malesuada ultrices. Nunc ut eros nulla. In vitae nibh nec mi tempus ultricies id eu enim. Suspendisse in sodales est. Nunc commodo commodo faucibus. Phasellus vehicula eros orci, quis ullamcorper metus sagittis ut. In sit amet tincidunt eros, non placerat arcu. Pellentesque ut malesuada tellus. Vivamus elementum lobortis risus, nec laoreet leo consequat a. Sed id hendrerit augue. Vivamus quam dolor, porttitor commodo enim sed, laoreet semper magna. Cras laoreet justo nulla, id scelerisque lorem consequat ac. Phasellus laoreet faucibus enim. Sed vitae urna sed dui ultricies interdum.

Suspendisse potenti. Suspendisse tristique ornare tortor quis consectetur. In sapien felis, semper ut dolor eget, dapibus tincidunt lorem. Sed at pulvinar nulla. Maecenas egestas mi et pulvinar viverra. Aliquam laoreet feugiat quam a laoreet. Pellentesque eleifend pharetra enim, a rhoncus leo pellentesque a. Maecenas ligula sapien, rutrum non euismod ac, tincidunt sit amet risus. Ut ac ante aliquam, posuere tellus non, sodales nunc. Suspendisse ut nunc in massa fermentum imperdiet in eget nulla. Sed eget dui feugiat, maximus nisl nec, sodales nulla. Quisque sit amet sapien eu lectus porttitor vehicula. Donec id mollis tellus, ac elementum purus. Nulla quis leo sit amet lorem dictum varius. Vestibulum vehicula eget sapien non cursus.

Suspendisse tempor lobortis scelerisque. Vestibulum semper et nisl ut cursus. Etiam at aliquet felis. Pellentesque mollis tellus nisl, ornare auctor enim dictum vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempus tincidunt viverra. Etiam pretium efficitur justo, vitae semper turpis malesuada at. Etiam ut ipsum vulputate, varius lectus at, rhoncus est. Nulla dictum ultricies neque, in commodo orci. Cras eget suscipit nulla, nec tempus arcu. Sed dignissim, nulla non pretium tempus, quam nisl dignissim est, nec cursus massa ex eget elit. Nullam pretium tellus odio. Donec hendrerit odio vel pellentesque imperdiet. Integer eget auctor magna, ut placerat tortor. Donec ut ante fermentum, molestie augue fringilla, ornare nunc.</div>
<div [hidden]="!show">
    <h2 id="step1">titi</h2>
</div>

.ts 文件：

show : boolean = false
go(){
    this.show = true
    document.getElementById("step1").scrollIntoView({behavior : "smooth"})
}

但是当我点击锚点时，第一次点击我有这个错误：

无法读取 null 的属性 scrollIntoView

我该如何解决这个问题？

标签： angulartypescript

解决方案

像这样改变你*ngIf的hidden-

HTML：

<div>Some elements</div>
 <a (click)="go()">toto</a>
<div [hidden]="!show">
  <h2 #step1>titi</h2>
</div>

TS：

@ViewChild('step1') step1: ElementRef;
  show : boolean = false
go(){
    this.show = true;
    this.step1.nativeElement.scrollIntoView({ behavior: "smooth"});
}

这背后的原因是，首先，Angular 不会找到 id 为 step1 的元素，As*ngIf 将从 DOM 中删除一个元素，而hidden只是从 DOM 中隐藏。

工作示例

推荐阅读