I am currently dealing with a navigation menu that utilizes the ng2-page-scroll module.
When scrolling through the page using hashtag links, I encountered an issue. If I navigate across routes, there is a delay in loading the data. As a result, the service initially scrolls to my desired section, but by the time all the data loads, the section is no longer visible on the screen. This requires manual scrolling to reach the intended section, rendering the entire menu ineffective.
To address this issue, I have implemented EventEmitters in all sections to set boolean values in the "scrollable" page, which works well. However, I am unsure of how to wait for the allDataLoaded boolean to become true.
In an attempt to solve this, I tried using promises.
This is the current state of my code.
HTML for the navigation menu component
<a [routerLink]="['']" [queryParams]="{ scrollTo: '#home' }">
<a [routerLink]="['']" [queryParams]="{ scrollTo: '#contact' }">
<a [routerLink]="['']" [queryParams]="{ scrollTo: '#about' }">
HTML for the component utilizing the root segment
<componentOne (dataLoadedEvent)="homeLoaded = true; checkIfDataLoaded()"></componentOne>
TypeScript for the component utilizing the root segment
homeLoaded: boolean = false;
contactLoaded: boolean = false;
aboutLoaded: boolean = false;
allDataLoaded: boolean = false;
ngOnInit() {
// other code here
this.route.queryParams.forEach((params: Params) => {
if (params['scrollTo']) {
this.checkIfDataLoaded().then(() => {
this.scrollToSection(params['scrollTo']);
});
}
});
}
checkIfDataLoaded() {
if (this.homeLoaded && this.contactLoaded && this.aboutLoaded) {
return new Promise((resolve, reject) => {
resolve(true);
});
}
}
As Günter Zöchbauer mentioned in response to another question (), attempting to use promises in this manner may result in a
TypeError: Cannot read property 'then' of undefinedTL;DR What is the appropriate method for utilizing promises while waiting for a boolean value to transition to true/false?