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

Question

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

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

问题是config.load（最终触发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()
• ＆＃34;加载中＆＃34;消失
• app.component的构造函数被调用，我得到了id，对config.load来说太晚了

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

• ＆＃34;加载中＆＃34;消失
• app.component的构造函数被调用，我得到了id
• config.load()从构造函数手动调用

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

Answer 1

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

只需使用

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