동적 구성 요소를 ngFor 목록에 추가

Question

앵귤러 2/4 (앵귤러)로 새롭게 추가 된 각 항목이 자신의 구성 요소를 제공하는 ngFor 목록의 구성 요소에 추가하는 방법을 생각해 보려고합니다. 목록을 클릭하십시오.

두 개의 형제 구성 요소가 있습니다. Thumbnail이라는 부트 스트랩을 사용하여 썸네일의 그리드 목록 (기하 급수적으로 긴)을 제공하고 보간법을 사용하여 형제 구성 요소의 데이터를 사용하여 추가 정보를 표시하는 형제 구성 요소가 있습니다. 각 섬네일을 클릭하면 각 정보가 목록 아래에 표시되지 않지만 그 사이에 표시됩니다. 주위를 둘러 보았고 ComponentFactoryResolver를 사용하여 동적 구성 요소를 만들고 @Viewchild를 사용하여 몇 가지 게시물을 보았습니다. 아직 성공적이지 못했습니다.

나는 목록 아래에 새로운보기 쇼를 가질 수 있었지만 그것은 디자인이면에 아이디어가 아닙니다.

이 작업을 더욱 복잡하게 만들려면 새보기를 라우팅해야합니다. 따라서이 새로운 구성 요소보기로 이동하려면/# id에 페이지 상단에 URL이 표시되도록하십시오. 또는 누군가가 URL을 방문하면 축소판 구성 요소 내의 새로운보기로 목적지로 라우팅됩니다.

내가 어떻게 작동 시키려고 노력했는지 설명하는 사진이 있는데, 나는 그것이 내가 얻고있는 것을 더 잘 설명한다고 생각한다.

https://imgur.com/a/nDRHT

나는 환상적 일 것으로보고해야한다 무엇에 어떤 도움. 감사.

Answer 1

코드 레이아웃을 보지 않고도 정확한 해결책을 제안하기는 어렵지만 위 스레드의 대화를 기반으로하면 아래의 내용이 좋은 시작 지점으로 충분하다고 생각합니다.

아이디어는 축소판 전체에 반복을 적용하고 각 축소판 구성 요소 내부에는 전체 너비가 될 조건부로 표시되는 배너가됩니다. 이론 상으로는 사이트의 성능에 영향을주지 않으면 서 올바른 위치에 자동으로 표시됩니다.

<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에 그려지지는 않습니다.