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

Question

请注意：我知道有 APP_INITIALIZER，但这似乎只适用于应用程序的顶级模块 (app.module.ts)。

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

在 admin-area.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._appState.user 和this._appState.businesses 的子组件。

我无法使用APP_INITIALIZER 加载它，因为只有在用户登录时才会加载上述数据。“登录”区域本身就是一个延迟加载的模块。

所以，问题很简单：

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

这个：

providers: [
  AdminAreaState,
  { provide: APP_INITIALIZER, useFactory: adminAreaInit, deps: [AdminAreaState], multi: true}
]

不起作用。 adminAreaInit() 没有被调用。这仅适用于我的顶级模块 app.module.ts。所以，APP_INITIALIZER 似乎不适用于任何其他模块，对吗？

我有什么选择？

---

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

注意，我已经在尝试使用*ngIf：

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

但问题是，如果我导航到这个特定页面并刷新该页面，business 始终是undefined。 business 是使用businessId 在businesses 的数组中找到正确的business 的结果。

在加载子组件时，我会加载其他数据。在这种情况下，一些评论 (cmets)。

现在，loadPage() 加载 一个 页面我要求的业务数据。 _appState 是一个应该首先加载的服务。如果我这样做：

  private loadPage() {
    console.log(this._appState);
    console.log(this._appState.businesses);
    this._appState.businesses.forEach(
      (b) => {
        console.log(b);
      });
    setTimeout(() => this._appState.businesses.forEach(
      (b) => {
        console.log(b);
      }
    ), 100);

    const businessId = this._appState.businessId;
    this.business = this._appState.businesses.find(b => b.id === businessId);
  }

这是我得到的：

如您所见，this._appState有 个业务，但 this._appState.businesses 确实打印了一个空数组。

_appState.businesses 只是一个Observable：

ApplicationState服务：

@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();
  }

}

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

Answer 1

在组件级别使用 Angular 解析器。更多信息请查看this。

Answer 2

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

如果父组件只是通过使用子组件标签来调用子组件，那么*ngIf 将是一个不错的选择——像这样

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

最后一个选项是使用ngOnInit 来初始化子组件中的数据。