我一直在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());
});
返回空值。
答案 0 :(得分:1)
使用解析器,因为它会在您导航到页面之前预取数据。 有一个here
的示例您也可以在angular.io
的“解决”页面上阅读有关此内容的信息。答案 1 :(得分:0)
在模板中使用* ngIf的简单方法:
<div *ngIf = 'some'></div>
然后
this.entityCtrl.getEntityByUser(localStorage.getItem("user")).subscribe(
response => {this.some = true});
因此您在服务中获取数据之前将不会显示该视图。