角 2 同步负载答案

【问题标题】：angular 2 synchronous load角 2 同步负载
【发布时间】：2017-03-21 08:11:54
【问题描述】：

我的语言环境或会话存储中有一个 JWT 令牌，其中包含用户 ID。

因此，如果用户在类似

的路线上刷新

test.com/route2

app.components.ts 通过 http 请求获取角色

    constructor(
    private userService: UserService
   )
  {
    this.userService.getUser(this.subId()).toPromise().then((data)=>{      this.setLoggedUser(data);
});
  }

所以问题现在出在我的 Route2 的 ngInit 事件上，即 route2.component.ts. 我正在做一个获取客户的 http 请求，但问题是它在设置 LoggedUser 之前被触发并引发 null 错误。

   this.groupService.getAllCustomersOfGroup(this.getLoggedUser().Group.Id).subscribe(
  data => this.customers = data,
  err => this.error(err),
  () => { this.loadingHideSucces(); }
);

【问题讨论】：

没有同步请求。您只需要通过返回其他人可以订阅的 Observable 来正确链接异步调用。有几个教程展示了如何在 Angular 中使用 observables (Google search)
带有 topromise、await 和 async（ES2016？）它是，但不是在构造函数中，idk 为什么
await 和 async 不会同步任何内容。它仍然是相同的异步。它只是更方便的语法。

标签： angular typescript httprequest

【解决方案1】：

您必须链接您的调用才能以正确的顺序获取数据，例如，您可以实现 getLoggedUser() 方法以返回 Observable：

ngOninit() {
  this.getLoggedInUser().switchMap(user=>{
    this.groupService.getAllCustomersOfGroup(user.Group.Id).subscribe(
        data => this.customers = data,
        err => this.error(err),
        () => {
            this.loadingHideSucces();
        }
    );
  })
}

getLoggedInUser():Observable<LoggedInUser>{
 // logic to fetch user data, returns an observable.
}

由于您的组件被命名为“route2”，我猜它在ng-router-outlet 标签中使用，然后您也可以使用Resolve guard。

【讨论】：