ngFor и пользовательский компонент с Content Projection - PullRequest
Новая
       38

ngFor и пользовательский компонент с Content Projection

0 голосов
/ 25 января 2019

У меня проблемы с поиском способа сделать это:

Во-первых, у меня есть родительский компонент

горизонтальная прокрутка подачи

HTML 

<cdk-virtual-scroll-viewportorientation="horizontal">
      <div *cdkVirtualFor='let content of contents' class="card-container">
           <ng-container></ng-container>
      </div>
</cdk-virtual-scroll-viewport>

.ts 

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-horizontal-scroll-feed',
  templateUrl: './horizontal-scroll-feed.component.html',
  styleUrls: ['./horizontal-scroll-feed.component.css']
})

export class HorizontalScrollFeedComponent implements OnInit {

  @Input() contents: Array<Object> = [];


   constructor() { }

   ngOnInit() {
   }

}

Во-вторых, у меня есть дочерний компонент

приложение кормить-карты

HTML 

<mat-card class="feed-card">
  <img class="feed-image" mat-card-image [src]='content.thumbnail'>

  <mat-card-content>
    <p class="feed-title">{{content.title}}</p>
    <p class="feed-content">
      {{content.content}}
    </p>
  </mat-card-content>

</mat-card>

.ts 

import { Component, OnInit, Input } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-feed-card',
  templateUrl: './feed-card.component.html',
  styleUrls: ['./feed-card.component.css']
})

export class FeedCardComponent implements OnInit {


  @Input() content: any;


  constructor() 
  {  }

  ngOnInit() {
  }

}

Я хотел поместить компонент AppFeedCard в компонент HorizontalFeedComponent, например, так: 

<app-horizontal-scroll-feed [contents]='contents'>
  <app-feed-card [content]='content'></app-feed-card>
</app-horizontal-scroll-feed>

или 

<app-horizontal-scroll-feed [contents]='contents'>
  <app-calendar-card [content]='content'></app-feed-card>
</app-horizontal-scroll-feed>

Я пытался, но мне не удалось заставить его работать. Один из способов сделать это - реализовать ввод type на родительском компоненте и использовать ngIf для выбора правильного компонента, например: 

<app-horizontal-scroll-feed type='feed-card' [contents]='contents'></app-horizontal-scroll-feed>

. 

<cdk-virtual-scroll-viewport orientation="horizontal">
  <div *cdkVirtualFor='let content of contents;'>
    <app-feed-card *ngIf="type === 'feed-card'" [content]="content"></app-feed-card>
    <app-calendar-card *ngIf="type === 'calendar-card'" [content]="content"></app-calendar-card>
  </div>
</cdk-virtual-scroll-viewport>

Но я действительно хотел сделать это с помощью Content Projection ...

Спасибо за помощь!

...