Angular 2 - 确保在进行其他 API 调用之前进行了一次 API 调用

Question

在我网站的每个页面上，一旦用户登录，我就会获取用户数据。

这个 API 调用是我应用中最重要的一个。

我从这个 API 调用中获得的信息在我的应用程序的许多组件中使用，我需要确保我的模板将“等待”这个 API 调用，然后再继续并显示我的申请资料。

此 API 调用是在服务构造函数中定义的，这是此方法在我的服务中的样子:

public userData;
...
    getUserData()
        {
        if (this.getToken()) {
        console.log("Getting user..");
        this.http.get('thisUser?token='+this.getToken())
          .map((res:Response) => res.json())
          .subscribe(
            data => {
                this.userData = data.user;
            },
            err => { this.checkToken(err); }
          );
        }

这意味着我的 JwtService.userData 变量必须在显示我的模板之前获取信息(我在我的组件中使用了 *ngIf="JwtService.userData)。

我如何确保首先获得这些数据？

Answer 1

这个问题很有趣。

我不知道我的解决方案是否能正常工作，因为我是通过智能手机编写的，我无法测试我的代码。

您可能正在使用路由器，所以您在某处有一个 <router-output> .

你可以尝试这样写:

<div ngIf="(callDone | async)">
 <router-output></router-output>
</div>

在哪里callDone是一个 Observable设置为 false在 API 调用之前并在回调中设置为 true。

另一种可能性是将所有组件链接到 Observable callDone . Angular 变化检测器应该完成所有工作