將動態組件附加到ngFor列表

新的角度2/4（Angular一般），我試圖找到一種方法來追加一個組件ngpro列表中的每個項目列出提供它自己的組件在列表中單擊。我有兩個兄弟組件。一種使用稱爲縮略圖的引導程序提供縮略圖的網格列表（指數級地長），並且我有一個使用插值來使用縮略圖組件中的數據顯示更多信息的同級組件。點擊時，我希望每個縮略圖顯示一個組件，其各自的信息不在列表下方，但是在它們之間。我環顧四周，看到了一些關於使用ComponentFactoryResolver創建動態組件並使用@Viewchild的帖子，並且我沒有在這裏獲得成功。將動態組件附加到ngFor列表

我已經能夠在列表下面看到新的視圖，但這不是設計背後的想法。

爲了進一步複雜化，我希望新的View被路由，所以如果有人導航到這個新的組件，那麼它將在/＃id頁面的頂部顯示它的URL。或者，如果有人訪問該URL，它將作爲縮略圖組件內的新視圖發送到其目的地。

下面是一張照片，描述了我一直試圖讓它發揮作用，我認爲它更好地解釋了我所得到的。

https://imgur.com/a/nDRHT

什麼我應該尋找到將是非常美妙的任何幫助。謝謝。

來源

2017-09-04 Brandon I

您是否嘗試過讓每個縮略圖都像ngFor中重複的那樣有一個col-12大小的元素，默認爲隱藏，並在點擊時顯示？這樣它就已經內置並顯示在你期待的位置。 –

您可能需要將您的列表拆分爲2x8並在其間顯示組件。沒有什麼奇特的需要。 – kuhnroyal

@kuhnroyal我應該提到網格實際上比16個縮略圖長得多，並且不斷添加到網格中。否則，你是對的，它並不像看起來那麼困難。 –

沒有看到你的代碼佈局，很難提出一個確切的解決方案，但根據我們在上面的線程中的對話，我認爲下面將足以作爲一個很好的啓動點。

這個想法是讓你的ngFor循環遍歷你的縮略圖，並在這些縮略圖組件中的每一個縮略圖組件將是一個有條件顯示的橫幅，這將是全寬。這在理論上會自動顯示在正確的位置，而不會影響您網站的性能（如果有的話）。

<div *ngFor="let thumbnail of thumbnails"> 
    <my-thumbnail class="col-md-3" [thumbnailImage]="thumbnail.imgSrc"></my-thumbnail> 
    <thumbnail-data class="col-md-12" *ngIf="thumbnail.showData"></thumbnail-data> 
</div>

顯然，這僅僅是一個如何攤開來一個超級簡單的例子，但這個概念是健全的。基本上你會遍歷你的縮略圖，並在那裏保留你的詳細橫幅部分，但通過ngIf隱藏，這導致它實際上不會被繪製在DOM中，直到你決定根據用戶交互顯示它。

來源

2017-09-05 17:07:21

將動態組件附加到ngFor列表

回答

相關問題