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加载它，因为只有在用户登录后才加载上述数据。“ login-in”区域本身就是一个延迟加载的模块。

所以，问题很简单：

在子组件尝试显示自身之前，如何确保已加载数据？

此：

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是使用business在businesses数组中找到正确的businessId的结果。

在加载子组件时，我将加载其他数据。在这种情况下，有一些评论（评论）。

现在，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

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

Answer 2

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

中执行此操作的示例

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

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

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

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

2 个答案: