Angular 2：更智能地使用http观察

我有全球服务。在这个全局服务中，我正在进行一个重要的API调用来获取用户数据。这个用户数据API调用对我网站中的许多页面都很重要，因此需要首先执行。我将此API调用以以下方式放置在我的服务构造函数中：

constructor(public router: Router,private http: Http) {
        if (this.getToken())
        this.getUserData().subscribe(() =>{});
    else
        this.LOADED = true;
    }

这很好用

现在我们来讨论一个组件。我有一个名为

WorldComponent

的组件，它使用从服务构造函数中执行的

this.getUserData（）

方法接收的信息，如上所示

当我试图使用从服务API调用中收到的数据时，我得到一个错误，即该数据不存在（因为调用此组件时API调用尚未完成）。因此，我在我的组件OnInit（）方法中放置了以下代码：

ngOnInit()
   {
       this.service.getUserData().subscribe(() => {    
            if (this.service.userData.fly)
                this.router.navigate(['fly']);
            if (this.service.userData.ride)
                this.router.navigate(['ride']);

            this.loaded = true;
        });
   }

当使用上面的cove时，我的组件工作得很好，但是如果您注意到的话-API调用将执行**两次！*

在使用此组件之前，是否有任何方法可以等待加载API调用，甚至更好，我的应用程序中的任何组件

---

在RC.5之前，我可以

*ngIf

路由器出口和路由器仅在收到数据时工作。现在我无法将*ngIf放置在路由器出口之外，我需要找到另一个解决方案。

其中一个可能会对您的案例有所帮助@GünterZöchbauer您提供的解决方案非常棒，对我很有用，这些评论确实有助于理解它的方式。非常感谢。很高兴听到这个消息。我会把这个问题标记为重复的。@GünterZöchbauer等等！！我刚刚注意到，在我的案例中，这个解决方案有一个问题。缓存不是我的解决方案，因为数据没有刷新！即使正在更新，用户数据仍保持不变。。用户在应用程序中执行操作时无法看到发生的更改。我的控制台显示了

getData called

，这意味着我已经有了数据，什么都不做。通过在

之后添加我的
.do
回到新方法来解决它。用这行代码映射

。其中一行可能对你的案例@GünterZöchbauer有所帮助你提供的解决方案很棒，这对我很有用，这些评论真的有助于理解它的方式。非常感谢。很高兴听到这个消息。我会把这个问题标记为重复的。@GünterZöchbauer等等！！我刚刚注意到，在我的案例中，这个解决方案有一个问题。缓存不是我的解决方案，因为数据没有刷新！即使正在更新，用户数据仍保持不变。。用户在应用程序中执行操作时无法看到发生的更改。我的控制台显示了

getData called

，这意味着我已经有了数据，什么都不做。通过将我的

.do

添加到

之后的新方法，解决了这个问题。用这行代码映射
。