加載完成之前從HTML獲取參數

我有一個基於Seed的Angular應用程序。我希望它在顯示任何內容之前等待加載所有數據。這與供應商在我app.module.ts完成：加載完成之前從HTML獲取參數

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()從構造

，我不希望出現這種情況，因爲這意味着所謂的手動該應用程序在配置實際加載之前顯示。

來源

2017-08-01 Kodiak

只要有一個'路由器Resolve'會很好地利用這裏我猜的。 –

如何使用'albumConfig.id = document.querySelector（'app-element'）。getAttribute（'data-id'）;'而不是？ –

@GünterZöchbauer請發表它作爲答案。 – Kodiak

您不需要等待Angular初始化根組件，該屬性已被靜態添加到index.html且不需要Angular進行讀取。

只需使用

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

來源

2017-09-04 10:58:44

加載完成之前從HTML獲取參數

回答

相關問題