Angular 等待父组件/模块加载数据

请注意：我知道有

APP\u初始值设定项

，但这似乎只适用于应用程序的顶级模块（APP.module.ts）

我有一个加载一些数据的父组件：

在管理区域.component.ts中：

ngOnInit(): void {

  forkJoin([
    this._userService.getMe(),
    this._placeService.getAll()
    ])
    .pipe(finalize(() => this.afterInit()))
    .subscribe(
      ([user, businesses]) => {
        this._appState.user = user;
        this._appState.businesses = businesses;
        this.afterInit();
      }
    );
}

问题在于，有一些子组件依赖于

this.\u appState.user

和

this.\u appState.businesses

我无法使用

APP\u初始值设定项加载此数据，因为只有在用户登录的情况下才会加载上述数据。“登录”区域本身就是一个延迟加载的模块

因此，问题相当简单：

如何确保在子组件尝试显示自己之前加载数据

这：

不起作用<代码>adminAreaInit（）

未被调用。这只适用于我的顶级模块app.module.ts。所以，

APP\u初始值设定项

似乎不适用于任何其他模块，是否正确

我的选择是什么

---

我想我需要提供更多的细节

请注意，我已经在尝试使用

*ngIf

：

<div *ngIf="!business?.servicePlan">
  Please Upgrade
</div>

这就是我得到的：

如您所见，

this.\u-appState

有业务，但

this.\u-appState.businesses

打印空数组

\u appState.businesses

只是一个可观察的

：

应用程序状态

服务：

@Injectable()
export class ApplicationState {

  public businessIdChange;

  public businessesChange;

  private _user = new BehaviorSubject<UserModel>(null);

  private _businessId = new BehaviorSubject<number>(null);

  private _businesses = new BehaviorSubject<Array<BusinessModel>>([]);

  constructor() {
    this.businessIdChange = this._businessId.asObservable();
    this.businessesChange = this._businesses.asObservable();
  }

  set user(value: UserModel) {
    this._user.next(value);
  }

  get user(): UserModel {
    return this._user.getValue();
  }

  set businessId(businessId: number) {

    if (businessId === this.businessId) {
      return;
    }

    this._businessId.next(businessId);
  }

  get businessId() {
    return this._businessId.getValue();
  }

  set businesses(value) {
    this._businesses.next(value);
  }

  get businesses(): Array<BusinessModel> {
    return this._businesses.getValue();
  }

}

@Injectable（）
导出类应用程序状态{
公共事业变革；
公共事业变革；
private _user=new BehaviorSubject（null）；
private _businessId=新行为主体（null）；
私人企业=新行为主体（[]）；
构造函数（）{
this.businessIdChange=this.\u businessId.asObservable（）；
this.businessesChange=this.\u businesss.asObservable（）；
}
设置用户（值：UserModel）{
此._user.next（值）；
}
get user（）：UserModel{
返回此值。_user.getValue（）；
}
设置businessId（businessId:number）{
if（businessId==this.businessId）{
返回；
}
此._businessId.next（businessId）；
}
获取businessId（）{
返回此项。_businessId.getValue（）；
}
设置业务（价值）{
这个._business.next（值）；
}
获取业务（）：数组{
返回此项。_businesss.getValue（）；
}
}

---

我不知道为什么我会看到这一点，我认为预加载数据无论如何都是有意义的。但也许我这里有一个不同的问题？

在组件级别使用角度解析器。查看更多信息。

如果子组件是通过路由显示的，那么使用解析器可能是一个不错的选择。下面是一个这样做的例子

如果父组件只是通过使用子组件标记调用子组件，那么

*ngIf

将是一个很好的选择-类似这样

<child-component *ngIf="condition"></child-component>

---

最后一个选项是使用

ngOnInit

初始化子组件中的数据。

是否有防止使用

*ngIf=“\u appstate\u user”的措施

在加载子组件的模板中？或者@SGalea可以使用

forkJoin

？我会使用@edkeveked建议的或解析器的技术。此应用程序可能需要一些重构，但是您可以快速解决此问题。请升级阅读有关智能/哑组件的信息并进行推送更改检测将使您的代码非常优雅，更易于推理。我刚刚尝试了这个。它只在“数据已加载”的意义下工作，但在数据完全到达之前，子级仍然被渲染。@displayname您能给我看一下您的解析器吗？通常解析程序返回resolve（）一个可观测值，该值在呈现组件之前解析，因此数据可用。我的问题已经很大了，我将它粘贴在这里：我只是从

forkJoin

@displayname返回可观测值。不返回订阅。它必须是可观察的！用水龙头或其他东西设置管道中的数据。像这样：啊，我想我需要使用

排气图

像这样：我更新了我的问题

*ngIf

已经是我选择的武器，但当我刷新页面时，它会崩溃。在这种情况下，不会加载数据，并且我的

条件

为

真

。（条件要求不为null）可能您需要使用此条件，而不是

“business&&！business？.servicePlan”

这是另一条评论中建议的。我试过了，但这只在50%的时间内有效。我认为您需要调整该条件以满足您的需要。

@Injectable()
export class ApplicationState {

  public businessIdChange;

  public businessesChange;

  private _user = new BehaviorSubject<UserModel>(null);

  private _businessId = new BehaviorSubject<number>(null);

  private _businesses = new BehaviorSubject<Array<BusinessModel>>([]);

  constructor() {
    this.businessIdChange = this._businessId.asObservable();
    this.businessesChange = this._businesses.asObservable();
  }

  set user(value: UserModel) {
    this._user.next(value);
  }

  get user(): UserModel {
    return this._user.getValue();
  }

  set businessId(businessId: number) {

    if (businessId === this.businessId) {
      return;
    }

    this._businessId.next(businessId);
  }

  get businessId() {
    return this._businessId.getValue();
  }

  set businesses(value) {
    this._businesses.next(value);
  }

  get businesses(): Array<BusinessModel> {
    return this._businesses.getValue();
  }

}

<child-component *ngIf="condition"></child-component>