如何顯示在角2

在兩個不同的組件有限的數據例如如何顯示在角2

我已在其中所有圖像從JSON示出共享組件稱爲圖像畫廊製成。現在我在主頁和圖庫頁面中使用這個共享組件。在主頁上，我想先顯示8張圖像，並在圖庫頁面中顯示所有圖像。

共享組件

@Component({ 
selector: 'app-gallery', 
templateUrl: './gallery.component.html' 
}) 
export class GalleryComponent implements OnInit { 
//getting images data from my service 

}

HTML是共享的組件是

<div class="col-md-3 col-sm-6" *ngFor="let image of gallery"> 
    <div class="gallery-img"> 
    <a href=""> 
     <img src="{{gallery.images[0]}}"> 
    </a> 
    </div> 
</div>

主頁的HTML組件

<app-gallery></app-gallery> //Here i want show 8 images only

圖庫組件頁

<app-gallery></app-gallery> // Here i want to show all images from gallery

來源

2017-01-12 Sohail

你可以發佈你的組件的代碼？ –

什麼是共享組件，它是什麼選擇器，它在哪裏使用？ –

您可以在您的應用程序畫廊組件創建輸入屬性：

@Input() images: any[];

，並傳遞任何陣列來自父組件的圖像：

個

<app-gallery [images]="images"></app-gallery>

或只傳遞前4個圖像使用切片管：

<app-gallery [images]="images | slice:0:3"></app-gallery>

這裏的基本plunker這可能有助於瞭解如何做到這一點。

來源

2017-01-12 08:33:06

使用'slice'管道的好處是隻有當'images'數組發生變化時才調用它，而每次運行變化檢測時會調用'.slice（）'方法，這可能會非常昂貴。 –

@GünterZöchbauer謝謝你，哇，不知道切片管道。很方便！將更新我的答案 –

感謝您解釋，它的工作。 – Sohail

也許你可以在自家的&圖庫頁面中使用你的組件選擇器，這兩者都將具有不同的共享組件實例。

並且爲了檢測這個共享組件屬於哪個組件，可以像下面那樣傳遞字符串值作爲輸入值。現在

<shared_component [hostComponent]="homePage"></shared_component> 
<shared_component [hostComponent]="imageGallery"></shared_component>

，共享組件裏面，你可以決定是否hostComponent是「主頁」然後應用管限制圖像8別的不適用的管道。

來源

2017-01-12 06:48:47

可以使用片管

<shared-component [images]="images | slice:0:8"></app-gallery>

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

來源

2017-01-12 08:13:57

如何顯示在角2

回答

相關問題