在加载完成之前从 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()
"Loading..."消失
app.component的构造函数被调用，我得到了id，config.load

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

"Loading..."消失
app.component的构造函数被调用，我得到了id
config.load() 从构造函数手动调用

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

Answer 1

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

只需使用

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

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

Get a parameter from HTML before loading is complete

angular-seed

angular