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

发布时间：2020-12-17 16:59:38 所属栏目：安全来源：网络整理

导读：我有一个基于Seed的Angular应用程序.我希望它在显示任何内容之前等待加载所有数据.这是通过我的app.module.ts中的提供程序完成的： providers: [ AlbumConfig,UserConfig,{ provide: APP_INITIALIZER,useFactory: (config: AlbumConfig) = () = config.load(

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

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

问题是config.load(最终触发解析(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()

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

解决方法

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

只是用

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!