Question

我一直在Angular（v8）中工作，我正在寻找最简单的方法来加载数据，然后再加载视图。

我需要加载两个服务并保存在localStore中。我在ngOnInit函数的页面标题中加载服务，就像这样

 ngOnInit() {
    this.usuario = localStorage.getItem("user");
    this.entityCtrl.getEntityByUser(localStorage.getItem("user")).subscribe(
      response => {
        this.entidadesTodos = response["body"];
        this.entidad = this.entidadesTodos[0]["id"];
        localStorage.setItem("entidad", this.entidad.toString());
      },

      (error: any) => {
        console.log(error);
      }
    );

    this.entityCtrl
      .getGroupsByEntityAndUser(
        localStorage.getItem("entidad"),
        localStorage.getItem("user")
      )
      .subscribe(
        response => {
          this.groupsTodos = response["body"];
          this.grupo = this.groupsTodos[0]["id"];
          localStorage.setItem("grupo", this.grupo.toString());
        },
        (error: any) => {
          console.log(error);
        }
      );
  }

问题是：服务在查看后加载，因此“破坏了”页面（网络需要此服务的价值才能起作用）。

问题是：在加载视图之前，最简单的加载服务的方法是什么？

---更新：尝试解决---

服务

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import { Resolve } from "@angular/router";

const httpOptions = {
  headers: new HttpHeaders({
    Authorization: "Token " + localStorage.getItem("token")
  })
};

const httpOptions2 = {
  headers: new HttpHeaders({
    "Content-Type": "application/json",
    Authorization: "Token " + localStorage.getItem("token")
  })
};

@Injectable({
  providedIn: "root"
})
export class EntityService implements Resolve<any> {
  constructor(private http: HttpClient) {}
  resolve(): Observable<any> {
    return this.http.get(
      "URL" +
        localStorage.getItem("user"),
      httpOptions
    );
  }
}

路线

import { EntityService } from "../services/entitites/entity.service";

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: "",
        component: AdminComponent,
        children: [
          {
            path: "principal",
            component: HomeComponent,
            canActivateChild: [AuthGuard],
            resolve: {
              entidad: EntityService
            }
          },

标题

 this.activatedRoute.data.subscribe(response => {
      this.entidadesTodos = response.entidad["body"];
      console.log(this.entidadesTodos);
      this.entidad = this.entidadesTodos[0]["id"];
      localStorage.setItem("entidad", this.entidad.toString());
    });

返回空值。

Answer 1

使用解析器，因为它会在您导航到页面之前预取数据。有一个here

的示例

您也可以在angular.io

的“解决”页面上阅读有关此内容的信息。

Answer 2

在模板中使用* ngIf的简单方法：

<div *ngIf = 'some'></div>

然后

this.entityCtrl.getEntityByUser(localStorage.getItem("user")).subscribe(
      response => {this.some = true});

因此您在服务中获取数据之前将不会显示该视图。

Angular2-在视图加载之前预加载多个服务

2 个答案: