Question

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

我想构建另一个所有组件都使用的服务。该服务将调用http get请求，该请求将检索组件的顺序（例如config），并根据此顺序在页面上对组件进行排序。我想使调用同步，以便在检索订单之前不加载组件。我想这样做是因为我不想在加载组件后使显示闪烁。基本上就像一个同步的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的响应。

Answer 1

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

Answer 2

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

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

我不太确定您打算如何使用此config订购组件。

Angular 5服务中同步http get请求？

2 个答案: