Angular 5服务中的同步http获取请求？答案

【问题标题】：synchronous http get request in Angular 5 service?Angular 5服务中的同步http获取请求？
【发布时间】：2018-09-06 04:59:51
【问题描述】：

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

我想构建另一个所有组件都使用的服务。该服务将调用 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 的响应。

【问题讨论】：

配置的结构是什么？组件究竟如何依赖于配置？
它是一个对象，键是组件名称，值是订单（编号）

标签： angular angular5 angular-services

【解决方案1】：

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

【讨论】：

这是正确的解决方案。 angular.io/guide/router#resolve-pre-fetching-component-data
不，他问的是如何避免页面加载时闪烁，而解决方案就是答案

【解决方案2】：

理想情况下，您应该创建一个ContainerComponent。这个ContainerComponent 将调用您正在谈论的方法，并将配置设置为ContainerComponent 类的属性。

然后，您可以将所有组件放在此ContainerComponent 的模板中的div 中，并在其上添加*ngIf。只有在调用您的服务方法后设置了 config 时才会呈现。

我不太确定你打算如何使用这个config 来订购组件。

【讨论】：