首页 > 解决方案 > Angular 5服务中的同步http获取请求?

问题描述

我有一个非常大的项目,其中包含很多组件和服务。

我想构建另一个所有组件都使用的服务。该服务将调用 http get 请求,该请求检索组件的顺序(如配置),并据此在页面上对组件进行排序。我想让调用同步,以便在检索到订单之前不会加载组件。我想这样做是因为我不想在加载组件后闪烁显示。基本上就像一个同步的ajax调用。

我的代码如下

服务

import { Injectable } from "@angular/core";

@Injectable()

export class ConfigService {
    constructor() {

    }
    getUserConfigFromDB() {
        //http request
        ;

    }
}

零件

import { Injectable } from "@angular/core";
import {ConfigService} from "../app/services/ConfigService"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'app';

  constructor(private configService: ConfigService) { }

  ngOnInit() {
    this.configService.getUserConfigFromDB()
  }
}

该服务将被很多组件使用。

先感谢您。

EDIT1:我想我不清楚。除了调用 getUserConfigFromDB() 方法外,我无法更改组件中的任何内容。我正在寻找 ajax(async:false) 的确切替代方案。我希望页面冻结,直到我得到 api 的响应。

标签: angularangular5angular-services

解决方案


无需使用同步 http 请求,只需将 http 请求放入解析器即可。在解析器获取数据之前,页面不会加载,因此您不会得到您正在谈论的闪烁。


推荐阅读