时间戳

首页 > 解决方案 > Angular路由器很慢

angular - Angular路由器很慢

问题描述

我在引擎盖下使用 Ionic 和 Angular。

设置

"@angular/router": "~9.1.9",
"@ionic/angular": "^5.1.1",
"rxjs": "^6.5.5",

我使用以下登录方法：当它被触发时，微调器被显示，数据被加载，路由到另一个页面，然后微调器再次被隐藏。

loginWithGoogle() {
    this.showSpinner = true;
    this.authService.getAuthSessionPersistence()
        .pipe(
            concatMap(() => this.authService.getAuth().signInWithPopup(new auth.GoogleAuthProvider())),
            concatMap(() => this.databaseService.getUserModel()
                .pipe(
                    concatMap(userModel => {
                        if (Object.keys(new UserInit()).every(key => userModel[key])) {
                            return of(userModel).pipe(first());
                        }

                        return this.authService.getUser()
                            .pipe(
                                concatMap(user => this.databaseService.createUser(user.uid, userModel))
                            );
                    }),
                    concatMap(userModel => this.store.dispatch([
                            new SaveUserAction(userModel),
                            new LoadFixturesAction(),
                            new LoadTeamsAction(),
                            new LoadTransactionsAction(),
                        ])
                    ),
                    tap(() => this.router.navigateByUrl('tabs/home'))
                )),
            finalize(() => this.showSpinner = false)
        )
        .subscribe();
}

问题是微调器在路由发生之前就被隐藏了。用户再次看到不太友好的登录屏幕。

正如你在上面的代码中看到的： 最后一个 RxJS 操作符是 use finalize，它是微调器被隐藏的地方。

你知道为什么路由器需要很长时间才能导航吗？

标签： angularrxjsangular-routing

解决方案

感谢我们设法找到解决方案的答案。

错误

tap(() => this.router.navigateByUrl('tabs/home'))
  • this.router.navigateByUrl('tabs/home') 返回一个承诺
  • 点击会产生副作用并且不等待承诺解决

解决方案

concatMap(() => from(this.router.navigateByUrl('tabs/home')))
  • from() 将 promise 转换为 observable
  • concatMap() 等待 observable

推荐阅读