Измените видимость компонента и выделите его, который не работает в Angular

Question

У меня есть родительский компонент, в котором есть несколько компонентов:

<div  class="mx-sm-auto mb-5 px-0 container">
  <app-set-vehicle-details id="step1" #step1 (step1Finished)="enableStep2()"></app-set-vehicle-details>
  <app-product-selection id="step2" *ngIf="step2Enabled"></app-product-selection>
  <app-product-additional id="step3" *ngIf="step3Enabled"></app-product-additional>
</div>

Все дочерние элементы испускают finished, как только они разблокированы, и вы можете перейти к следующему шагу. Таким образом, вы включаете следующий шаг следующим образом:

step2Enabled = false;

enableStep2() {
  this.step2Enabled = true;
  this.scrollToElement('step2');
}

scrollToElement(id: string): void {
  const element = document.querySelector('#' + id);
  if (element) {
    element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
  }
}

Таким образом, step2 компонент становится видимым, но выделите его, он не работает. Я предполагаю, что это происходит потому, что видимость второго компонента не была истинной до вызова scrollToElement, потому что он работает, когда компонент виден.

Как я могу заставить это поведение работать?

Спасибо!

Answer 1

Вы можете отслеживать присутствие дочернего компонента с помощью ViewChildren, подписавшись на событие QueryList.changes.

Сначала установите переменную ссылки на шаблон для дочернего компонента:

<app-product-selection #step2 *ngIf="step2Enabled"></app-product-selection>

Затем используйте эту переменную для ссылки на элемент узла компонента в коде и подпишитесь на событие QueryList.changes в ngAfterViewInit. Когда событие инициируется, прокрутите компонент в поле зрения:

@ViewChildren("step2", { read: ElementRef }) step2List: QueryList<ElementRef>;

ngAfterViewInit() {
  this.step2List.changes.subscribe(() => {
    if (this.step2List.length > 0) {
      (this.step2List.first.nativeElement as HTMLElement).scrollIntoView();
    }
  });
}

См. этот стек для демонстрации.

Answer 2

Мое решение таково:

enableStep2() {
   this.step2Enabled = true;
   setTimeout(() => {
     this.scrollToElement('step2');
   });
}

Это ждет, пока шаг 2 не станет видимым. Так прекрасно!