Javascript 如何在加载组件之前获得服务响应？

我有一个向api发出请求的服务，根据它的响应，我应该决定是否必须加载组件。但是，由于接收响应需要花费一段时间，所以不管响应状态如何，组件都会加载，并且在接收到一段时间（大约0.5秒）响应后，如果必须不加载组件，我们会导航到其他地方。我不希望在收到响应之前加载组件

我在angular 4中使用AuthGuard的canActivate函数，如下所示：

export class AuthGuard implements CanActivate {
access = true;
res: any;

constructor(private router: Router, private routeService: RouteService){}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    setTimeout(() => {
        if( !this.exept.includes(this.router.url) ){
            this.routeService.FormOperation(this.router.url).subscribe(item=> {
                this.res = item;
                if (this.res.status == 200) {
                    if (this.res.data.Access[1] == false) {
                        this.access = false;
                    }
                    if (this.access == true)
                    {
                       return true;
                    }
                else {
                    this.router.navigate(['/dashboard']);
                    return false;
                }
            })
        }
    },0);

    if (sessionStorage.getItem('token') && this.access)
    {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
    return false;
}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): void {

    this.routeService.FormOperation(this.router.url).toPromise()
        .then(response => {
            this.form_operation_data = response;

            if(!this.form_operation_data['data']['Access'][1]) {
                this.router.navigate(['/dashboard']);
            }
        })
        .catch(err => {
            console.error(err);
        });
}

我正在使用setTimeout，以便获得正确的this.router.url

更新：

我添加了如下解析器：

export class AuthGuard implements CanActivate {
access = true;
res: any;

constructor(private router: Router, private routeService: RouteService){}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    setTimeout(() => {
        if( !this.exept.includes(this.router.url) ){
            this.routeService.FormOperation(this.router.url).subscribe(item=> {
                this.res = item;
                if (this.res.status == 200) {
                    if (this.res.data.Access[1] == false) {
                        this.access = false;
                    }
                    if (this.access == true)
                    {
                       return true;
                    }
                else {
                    this.router.navigate(['/dashboard']);
                    return false;
                }
            })
        }
    },0);

    if (sessionStorage.getItem('token') && this.access)
    {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
    return false;
}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): void {

    this.routeService.FormOperation(this.router.url).toPromise()
        .then(response => {
            this.form_operation_data = response;

            if(!this.form_operation_data['data']['Access'][1]) {
                this.router.navigate(['/dashboard']);
            }
        })
        .catch(err => {
            console.error(err);
        });
}

---

但是组件仍然会在响应数据接收之前加载…

您太接近了：您的AuthGuard应该返回

true

或

false

，并且基于此值，路由将被激活或不被激活。现在，您必须将此身份验证保护添加到路由中（这里是激活子路由的示例）。如果您想在加载组件之前获取数据，可以使用解析器

解析器

/* Imports */
@Injectable()
export class DataResolverService {

  constructor(
    private _serviceToShareData: ServiceToShareData,
    private _serviceToGetData: ServiceToGetData,
  ) { }

  /* An example with Promise */
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<void> {
    return this._serviceToGetData.anyRequestToApi()
      .then(response => this._serviceToShareData.setData(response))
      .catch(err => {
        console.error(err);
      });
  }
}

---

看这个：谢谢你。我更新了我的问题并添加了解析程序，请看一下…@我想知道是什么原因导致解析无法加载？我从1开始就没用过。我需要某种数据类型吗？@Winnemucca，您可以在此处找到更多详细信息：。如果在解析器中进行异步调用，则应返回

Promise

或

observeable

（我的回答中也有相同的错误，已更正）。实际上，如果所有操作都是同步的，您可以只返回值，这很好（但在大多数情况下，您处理的是异步调用）。