Question

我有一个使用ng2-page-scroll模块的导航菜单。

我使用＃标签链接滚动页面。

问题在于，如果我在交叉路线上工作，数据需要一些时间来加载，所以服务通常滚动到我的部分，而不是整个数据加载，感兴趣的部分将不再在屏幕上折叠，所以用户需要手动滚动才能进入interst部分。这使得整个菜单毫无用处。

所以我在所有部分都使用EventEmitter，在“可滚动”页面中设置bool，一切都很好......

但我不知道如何等待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

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 undefined

打破

TL; DR 在等待bool转为true / false时使用promises的正确方法是什么？

Answer 1

问题在于您的代码，特别是在checkIfDataLoaded()方法中，而不是因为您正在使用布尔值。

当内部条件解析为false时，它显然会抛出错误，因为该方法返回undefined，因此调用undefined.then(...会引发错误。

当然，我不知道checkIfDataLoaded()应该做什么，但如果你想将.then()链接到其结果，那么总是必须返回{{ 1}}。

也许是这些方面的东西：

Promise

这种方式checkIfDataLoaded() { return new Promise((resolve, reject) => { if (this.homeLoaded && this.contactLoaded && this.aboutLoaded) { // Whatever logic goes here resolve(true); } else { resolve(false); } }); }总是返回checkIfDataLoaded()，而其内部可以做任何你需要的事情。

Angular 2 - 在执行服务之前等待布尔值为true

1 个答案: