寻找 Angular 7 版本的 Vue.js “nextTick”

Question

I'm developing a page in Angular 7, where i want to do something (scroll to section) after i'm sure the page has re rendered. The section i want to scroll to is initially hidden with an ngif and when the section is shown and completely rendered in the DOM, then i want to scroll to it. I've used Vue.js before and their callback function nextTick, which has been working but i can't find a similar solution in angular. I'd rather not use a setTimeout because if set to 0 the DOM is not always ready and re rendered and setting it higher makes it delayed.

Answer 1

You could put inside your *ngIf a component and use the AfterViewInit lifecycle hook which will call a parent function after he rendered properly.

https://angular.io/api/core/AfterViewInit

Answer 2

Why not try requestAnimationFrame ? It worked for me. You don't need to set a time while DOM is always rerendered and runs with no delay.

Answer 3

well the angular alternate would be setting settimeout to 0 in your code where the if flag is changed and then immediately calling ChangeDetectorRef.detectchanges() after it so it shall force to detect the change in the immediate next cycle, something in your component like

...
sectionRendered = false;
constructor(private cdf: ChangeDetectorRef){
}
function renderSection(){
 this.sectionRendered = true;
 setTimeout(() => {
   // here you can access the relevant component
   this.scrollSection();
 }, 0);
 this.cdf.detectChanges();
}
...