Angular 5 Не удается прочитать свойство 'scrollIntoView' со значением NULL

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'});
    }

Но я столкнулся с ошибкой:

Невозможно прочитать свойство 'scrollIntoView' с нулевым значением

Я видел несколько постов по этому поводу и применил несколько методов, таких как scrollToBottom();, но не повезло.

Любая помощь приветствуется.

---

изменение:

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

Выше все еще отображается ошибка

Невозможно прочитать свойство 'scrollIntoView' с нулевым значением

Answer 1

, так как есть условие для отображения div, вам нужно вызвать функцию прокрутки, когда значение requestForCostShipment истинно, что-то вроде этого

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

или позвоните this.scroll('orderhistory');, где значение requestForCostShipment установлено на true.

Answer 2

Проблема в том, что ваш el еще не отрендерен. Причиной этого, вероятно, является вызов this.scroll из ngOnInit, когда элементы не существуют в DOM. Вы должны вызвать scroll метод в ngAfterViewInit, который просто вызывается один раз после инициализации представления.