Question

我创建一个有角度的项目

.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

我该如何解决？

Answer 1

用*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的元素，因为*ngIf将从DOM中删除一个元素，而hidden只是从DOM中隐藏。

Working Example

如何解决无法读取null的属性scrollIntoView的问题？

1 个答案: