typescript - Angular 2 - รอให้ boolean เป็น true ก่อนเรียกใช้ service

ฉันมีเมนูนำทางที่ใช้โมดูล ng2-page-scroll

ฉันเลื่อนผ่านหน้าโดยใช้ลิงก์แฮชแท็ก

ปัญหาคือ ถ้าฉันทำงานข้ามเส้นทาง ข้อมูลจะใช้เวลาบ้างในการโหลด ดังนั้นบริการจะเลื่อนไปยังส่วนของฉันก่อน จากนั้นข้อมูลทั้งหมดจึงโหลด และส่วนที่สนใจจะไม่อยู่บนหน้าจออีกต่อไป ดังนั้นผู้ใช้ต้องเลื่อนด้วยตนเองเพื่อไปยังส่วนที่สนใจ สิ่งนี้ทำให้เมนูทั้งหมดใช้งานไม่ได้

ดังนั้นฉันจึงใช้ EventEmitter ในทุกส่วน เพื่อกำหนดค่าบูลในหน้า "scrollable" ทุกอย่างเรียบร้อยดี...

แต่ฉันไม่รู้ว่าจะรอให้ค่าบูลีน allDataLoaded เป็นจริงอย่างไร

ฉันพยายามใช้พรอมิส

นี่คือวิธีที่โค้ดของฉันดูจนถึงตอนนี้

HTML ของส่วนประกอบเมนูนำทาง

<a [routerLink]="['']" [queryParams]="{ scrollTo: '#home' }">
<a [routerLink]="['']" [queryParams]="{ scrollTo: '#contact' }">
<a [routerLink]="['']" [queryParams]="{ scrollTo: '#about' }">

HTML ของคอมโพเนนต์ที่ใช้เซ็กเมนต์ราก

<componentOne (dataLoadedEvent)="homeLoaded = true; checkIfDataLoaded()"></componentOne>

TS ของส่วนประกอบที่ใช้ 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) {
        //this.allDataLoaded = true;
        return new Promise((resolve, reject) => {
            resolve(true);
        });
    }
}

ตามที่GünterZöchbauerตอบที่นี่ (https://stackoverflow.com/a/40126194/3264998) สำหรับคำถามอื่น รหัสจะส่งผลให้เกิดข้อผิดพลาด TypeError: Cannot read property 'then' of undefed

สรุป วิธีที่ถูกต้องในการใช้ promises เมื่อรอให้ตัวแปรบูลีนเปลี่ยนเป็น true/false คืออะไร?

คำตอบ #1

ปัญหาอยู่ในโค้ดของคุณ โดยเฉพาะในเมธอด checkIfDataLoaded() และไม่ได้เกิดจากที่คุณกำลังทำงานกับบูลีน

มันชัดเจนว่าจะเกิดข้อผิดพลาดเมื่อเงื่อนไขภายในประเมินค่าเป็น false เพราะว่าเมธอดนั้นจะคืนค่า undefined และดังนั้นการเรียก undefined.then(... จะทำให้เกิดข้อผิดพลาด

แน่นอนผมไม่รู้ว่า checkIfDataLoaded() ควรทำอะไรอย่างแน่นอน แต่ถ้าคุณต้องการต่อ .then() กับผลลัพธ์ของมัน มันก็ต้อง เสมอ คืนค่า Promise

อาจจะเป็นบางอย่างประมาณนี้:

checkIfDataLoaded() {
    return new Promise((resolve, reject) => {
        if (this.homeLoaded && this.contactLoaded && this.aboutLoaded) {
            // Whatever logic goes here
            resolve(true);
        } else {
            resolve(false);
        }
    });
}

ด้วยวิธีนี้ checkIfDataLoaded() จะส่งค่ากลับเป็น Promise เสมอ ในขณะที่ภายในสามารถทำอะไรก็ได้ตามที่คุณต้องการ