Прокрутите до определенной панели расширения в материале после загрузки компонента

Question

Мы пытаемся прокрутить до определенного элемента <mat-expansion-panel> в пределах <mat-accordion>. Проблема в том, что ngAfterViewInit() запускается до полной загрузки аккордеона. Это означает, что функция scrollIntoView() вызывается во время загрузки аккордеонов, а размер страницы впоследствии изменяется, и наша операция прокрутки приводит нас к неправильной позиции страницы.

Мы также попробовали другие хуки жизненного цикла, которые не помогли, так как все они были вызваны рано. У кого-нибудь есть хорошая практика по этому вопросу?

Наш источник прост, так как мы пытаемся реализовать что-то очень простое:

landingpage.component.html

<mat-accordion>
   <mat-expansion-panel id="pangel-1">
    <mat-expansion-panel-header>
      <mat-panel-title>Lorem ipsum</mat-panel-title>
    </mat-expansion-panel-header>
    <p>
      Lorem ipsum dolor sit amet,
      consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt...
    </p>
  </mat-expansion-panel>
  <mat-expansion-panel id="panel-2">
    <mat-expansion-panel-header>
      <mat-panel-title>Lorem ipsum</mat-panel-title>
    </mat-expansion-panel-header>
    <p>
      Lorem ipsum dolor sit amet,
      consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt...
    </p>
  </mat-expansion-panel> 

  [ ... ] // more panels

</mat-accordion>

landingpage.component.ts

ngAfterViewInit() {
  this.scroll("panel-1");
}

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

Answer 1

Вот пример StackBlitz с Angular Material 7. Ваша техника работает отлично, но вам нужно быть осторожным в паре вещей - убедитесь, что страница достаточно длинная, чтобы панель могларасполагаться в верхней части страницы и убедитесь, что вы не ошиблись при вводе идентификатора панели.

Answer 2

В моем примере я что-то щелкаю, и открывается боковая навигация, занимающая половину экрана, поэтому в функции щелчка у меня есть такая логика:

if ($event) {
    setTimeout(() => $event.target.scrollIntoView({behavior: 'smooth', block: 'end'}), 1);
}

Так что в вашем примере вы можете привязать кafterExpand событие (на панели расширения матов) и запуск логики.