使用角度加載多個子組件2

我有一個要求，我調用外部API來獲取我的子組件的ID列表，併爲每個ID，我出去另一個外部API來獲取子的細節。使用角度加載多個子組件2

我在父組件角的代碼如下所示

<div *ngFor="let link of result | objToArr"> 
     <details #Details [Id]="link.id"></details> 
</div>

結果是結果我從第一API CAL和子組件的[ID]得到上面的輸入變量。我在子組件的ngInit上調用詳細的API調用。同樣的事情也給

   this.Service.getDetails(this.apiBaseUrl, this.Id).subscribe(
        res => { 
         this.result = res.json().detail; 
         this.units = this.result.unit; 
         this.meterIdonLoad = this.Id; 
        });

這適用於大多數情況，但也有多個呼叫走出去的同時，以獲取詳細信息和瀏覽器的排隊造成了相當不可接受的等待期爲整個頁面調用加載。以下是一次通話的網絡物流。。

有沒有更好的方法來改善頁面響應時間/重新設計頁面？

通過郵遞員個人調用的dtails需要50-80毫秒的任何地方，所以問題不在API服務器。

任何幫助，非常感謝。

來源

2017-06-19 Vish

你是否必須同時顯示所有的細節？每次顯示詳細信息時都可以發出呼叫並緩存結果。如果您必須同時顯示所有這些數據，則可以考慮將所有'link.id'值傳遞到單個端點，並重構您的組件以迭代返回的數據。只是一些想法......總有選擇。 – Brandon

是的，必須同時顯示細節。我想我沒有提及這些是網格中的項目。網格中的每個訂單項都是一個子組件。從API調用多個調用最終能夠更好地實現來自UI的多個調用？我可以在外部API上編寫一個封裝器，並將數據集用所有數據提供給UI。你認爲這會改善加載時間嗎？ – Vish

我會一次獲取所有數據，然後遍歷它。角度在渲染數據方面速度非常快。如果API調用需要幾秒鐘，您可以始終顯示加載程序以讓最終用戶知道正在進行的操作以改善用戶體驗。 – Brandon

我想你應該根據你的要求

1）改變你的設計，如果你的要求是擁有所有孩子的細節，而不是你的支持裝載頁面應該處理的操作。

2）如果你的要求是，你可以展示一些孩子的細節和擴孔細節一旦用戶開始滾動比你可以使用虛擬滾動（https://github.com/rintoj/angular2-virtual-scroll）

3）如果你的要求，你需要說明如何選擇孩子之後用戶詳細組件，而不是在選擇操作後可以觸發每個單獨的請求。

來源

2017-06-19 18:12:14 CharanRoot

使用角度加載多個子組件2

回答

相關問題