如何确保 ngAfterViewInit 在呈现某个 HTML 元素后运行？

Question

In HTML, there is a <a> that redirects to another component, and after that scrolls to a certain anchor.

In the target component, I have the following code

  ngAfterViewInit(): void {
    this.route.fragment.subscribe(fragment => {
      const elmntLoc: HTMLElement = document.getElementById(fragment);
      window.scroll({
        top: elmntLoc.offsetTop,
        behavior: "smooth"
      });
    });
  }

However, I found that document.getElementById(fragment); is always null , because this element is displayed conditionally using ngIf = booleanVariable , and when this ngAfterViewInit life cycle hook runs, this booleanVariable is not calculated yet.

I am wondering how to make sure ngAfterViewInit runs after booleanVariable is calculated and therefore this element is rendered?

I tried to use setTime but it seems hacky...

Thanks in advance!

Answer 1

Try using _elementRef instead:

this._elementRef.nativeElement.querySelector('#'+fragment)

Answer 2

You could try waiting for the next animation frame to give a chance for the html element to render.

ngAfterViewInit(): void {
  this.route.fragment.subscribe(fragment => {
    window.requestAnimationFrame(_ => {
      const elmntLoc: HTMLElement = document.getElementById(fragment);
      window.scroll({
        top: elmntLoc.offsetTop,
        behavior: "smooth"
      });
    }
  });
}

Need to see more of your code to give a more robust answer.

Answer 3

Thanks for the answers but they don't work properly I am afraid... (Perhaps I tried them in a wrong way.)

I managed to solve this problem using

  @ViewChild('elementId') set elementName(elementName: ElementRef) {
      # code to scroll to a certain section of the page.
  };

The method will run after this ViewChild is rendered.