angular - 在加载完成之前从 HTML 中获取参数

Question

我有一个基于 Seed 的 Angular 应用程序。我希望它在显示任何内容之前等待所有数据的加载。这是通过我的提供者完成的app.module.ts：

providers: [
  AlbumConfig,
  UserConfig,
  {
    provide: APP_INITIALIZER,
    useFactory: (config: AlbumConfig) => () => config.load(),
    deps: [AlbumConfig],
    multi: true
  }
],

问题是config.load（最终触发 a resolve(true)）需要服务器在 HTML 页面中给出的 id：

<rmalbum-app data-id="<?php print $album_id; ?>">Loading...</rmalbum-app>

我发现获取此参数的唯一方法是在app.component的构造函数中：

albumConfig.id= this.elementRef.nativeElement.getAttribute('data-id');

问题是这个构造函数只在初始化之后被调用。

所以我要么有，按时间顺序：

• config.load()
• “正在加载...”消失
• app.component的构造函数被调用，我得到了 id，为时已晚config.load

或者，如果我删除 APP_INITIALIZER 并将其放入config.load()组件的构造函数中：

• “正在加载...”消失
• app.component的构造函数被调用，我得到了 id
• config.load()从构造函数手动调用

我不希望这样，因为这意味着在实际加载配置之前显示应用程序。

Answer 1

您不需要等待 Angular 初始化根组件，该属性已经静态添加到index.html并且不需要 Angular 读取。

只需使用

albumConfig.id = document.querySelector('app-element')
    .getAttribute('data-id'‌​);