將初始化數據傳遞給Angular 2

有誰知道一種方法，我可以將初始化數據傳遞到Angular CLI構建的Angular 2應用程序中嗎？我需要從預先認證的.NET後端傳遞Access令牌，以便我可以調用API。將初始化數據傳遞給Angular 2

我試圖通過本地web api端點來做到這一點，但由於Observables是異步的，模塊會嘗試在應用程序中可用之前使用該值。

我已經嘗試了@Ben Nadel的OnRun建議Here。我的http調用的結果仍然發生在應用程序加載後，導致我的訪問標記在第一次加載時爲空。

像@Bilyachat建議在下面會很好！在那裏我可以簡單地做下面的事情：

<app-root [apiKey]="1234567890xxxxx"></app-root>

任何幫助將是可怕的...謝謝。

來源

2017-02-21 Mike Kushner

「但我跑再次進入異步問題。「請發佈代碼並解釋遇到的問題。 –

我已經更新了這個問題。基本上，我需要該API密鑰才能開始執行安全應用程序中的任何頁面。我已經從服務器獲得密鑰，並需要將其傳遞給應用的方法。 –

我沒有看到任何關於'OnRun'的信息。你使用了什麼代碼，它造成了什麼問題？ –

如果你有角應用MVC頁面上，然後我看到兩個選項

首先在角根組件的屬性（在第一個建議，我告訴你使用的輸入參數，但問題是，根組件「出角」，它會無法讀取參數的唯一方法是，當你打印，你可以做這樣的

閱讀手動屬性）

import {Component, NgModule, Input, ElementRef} from '@angular/core' 
export class App { 
    myConfig: any; 
    constructor(element: ElementRef) { 
    this.myConfig = element.nativeElement.getAttribute('data-config'); 
    } 

}

然後

更新plnkr

二MVC頁面上

打印

var yourAppMvcConfig= { 
    configValue: 'DO_PRINT_HERE' 
};

添加到SRC/typings.d.ts（如果它缺少它添加）

declare var yourAppMvcConfig: { 
    configValue: string; 
}

用於Angular

yourAppMvcConfig.configValue

來源

2017-02-21 23:23:30

謝謝Volodymyr，我試着做你的第一個建議，但無法讓它工作。我在這裏做了一個[Plunkr]（https://plnkr.co/edit/46rXGzmtd5JRf8GQFxNg?p=preview）給你看。 –

而新的CLI項目中不存在Typings.d.ts。有人說，他們在谷歌搜索時被棄用。 –

@MikeKushner檢查更新 –

「模塊嘗試在應用程序可用之前使用該值」 - 我認爲這是您的問題。

相反，延遲加載頁面直到您的令牌調用返回，爲什麼您不寫代碼，直到令牌返回時才進行任何調用？

ngOnInit() { 
    this.tokenService.getToken().subscribe((token) => { 
     console.log('now I have a token, and am ready to make my calls', token); 

     this.secureService.getSecureDataUsingToken(token).subscribe((result) => { 
      console.log('here is the result of the authenticated call', result); 
     } 
    }); 
}

來源

2017-02-22 14:29:55 paul

你是絕對正確的@paul，這將起作用，除非我必須重複使用secureService.xxxMethod方法的每個組件上的邏輯。仍然在尋找一種方法，將密鑰直接從服務級別使用，而不是在容器級別上使用，如果可能的話。 –

如果使用{}，明確return在返回config.load需要（）;

useFactory: (config: AppConfig) =>() => { 
    return config.load(); 
    },

Plunker example

來源

2017-02-23 07:37:39

嗨Gunter，是否有可能有兩個應用程序初始化器，第二個初始化器等待直到第一個完成？我有一個配置服務，返回運行APP_INITIALIZER的應用程序的所有url。我還有一個本地化模塊和提供程序，只有在本地化的第一個配置已經運行時才能加載，其中包含從配置服務返回的api端點。 – crh225

我不這麼認爲，但你可以將它們合併成一個單獨的單元並將它們連接起來，以便第二個單元等待第一個單元 –

這就是我最終做的。感謝您提供強有力的角度支持。我知道社區對此表示讚賞！ – crh225

這裏是一個解決方案，我發現。您的index.html文件正好從角度開始加載您的腳本文件。您可以添加以下行：

<script type="text/javascript">localStorage.setItem("title", "<?php echo $title; ?>")</script>

這將將數據放在localStorage的客戶端上的，你可以檢索你的應用程序中。我正在使用PHP試圖在opencart商店中初始化一些內容。這是一個很好的方式來傳遞數據。如果你傳遞一個JSON，你需要通過json.stringfy。當你通過應用程序檢索它時，你需要做json.parse

來源

2017-10-03 09:44:43 darrisb

將初始化數據傳遞給Angular 2

回答

相關問題