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

Question

シードに基づいて角度アプリケーションがあります。何かを表示する前にすべてのデータの読み込みを待つ必要があります。それは私のapp.module.ts中のプロバイダで行われます。

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

唯一の方法：

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

問題は、（最終的にresolve(true)を発射する）config.loadサーバによってHTMLページに指定されたidを必要としています私は、このパラメータはapp.componentのコンストラクタである取得することが分かっ：

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

問題は、このコンストラクタがオンになっていることです初期化の後に呼び出されます。

だから私はどちらかが時系列に、持っている：

• config.load()
• "読み込んでいます..."
• app.componentのコンストラクタが呼び出され、私は遅すぎるconfig.load

のため、IDを取得消えます

、またはAPP_INITIALIZERを削除して、コンポーネントのコンストラクタにconfig.load()を入れた場合：

• 「ロード...」
• app.componentのコンストラクタが呼び出され、私はそれが意味するのでことを望んでいない、手動でコンストラクタ

から呼び出さID

config.load()を得る消えますconfigが実際にロードされる前にアプリケーションが表示されます。

Answer 1

Angularがルートコンポーネントを初期化するのを待つ必要はありません。属性はすでに静的にindex.htmlに追加されており、角度を読み取る必要はありません。

単に `ルータResolve`は、ここで私が推測良い使用されるであろう持つ

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