Question

我想在页面加载时将页面滚动到元素。参见下面的示例：

A) http://localhost:4200/#/test/test-history
B) http://localhost:4200/#/test/test-history#orderhistory

当我输入A）时，我希望正常的页面加载没有滚动效果。当我输入B）时，我想通过滚动到该元素来页面加载。

在HTML中，我做了<div #orderhistory id="orderhistory" *ngIf="requestForCostShipment" >Bla Bla </div>

在.ts文件的ngOnInit()下，我执行了以下操作：

this.scroll('orderhistory');

我在下面写了一个函数：

scroll(id) {
      let el = document.getElementById(id);
      el.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
    }

但是，我遇到了错误：

无法读取null的属性'scrollIntoView'

我看到了几篇文章，并应用了scrollToBottom();之类的几种方法，但是没有运气。

感谢您的帮助。

已修改：

ngAfterViewInit() {
      // Scroll (Anchor) Function to Order History
        this.scroll('orderhistory');
    }

上面仍然显示错误

无法读取null的属性'scrollIntoView'

Answer 1

由于存在显示div的条件，因此当requestForCostShipment的值为true时，需要调用scroll函数

ngAfterViewInit() {
      // Scroll (Anchor) Function to Order History
      if(this.requestForCostShipment){
        this.scroll('orderhistory');
       }
    }

或调用this.scroll('orderhistory');的值设置为requestForCostShipment的{{1}}。

Answer 2

问题是您的el尚未渲染。原因可能是当元素在DOM中不存在时，从this.scroll调用了ngOnInit。您应该在scroll中调用ngAfterViewInit方法，该方法在初始化视图后仅被调用一次。

Angular 5无法读取null的属性'scrollIntoView'

2 个答案: