angular - 読み込みが完了する前に HTML からパラメーターを取得する

Question

Seed に基づく Angular アプリケーションがあります。何かを表示する前に、すべてのデータが読み込まれるのを待ちたいと思います。これは、 my のプロバイダーで行われます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()
• 「読み込んでいます...」が消える
• app.componentのコンストラクターが呼び出され、ID を取得しましたが、遅すぎますconfig.load

または、APP_INITIALIZER を削除config.load()してコンポーネントのコンストラクターに配置すると、次のようになります。

• 「読み込んでいます...」が消える
• app.componentのコンストラクターが呼び出され、ID を取得します
• config.load()コンストラクターから手動で呼び出される

構成が実際にロードされる前にアプリケーションが表示されることを意味するため、これは望ましくありません。