Angular - 传递参数以转换组件

Question

我试图了解以下是否可行。 我有一个视频上传器组件，用户可以上传一个或多个视频。 该组件有3个视图选项 1.单独 - 正在进行的视频和上传的视频显示在单独的表格中。 2.组合 - 所有视频都显示在具有状态的同一表格中 3. UploadOnly - 仅显示上传的视频。

今天视频上传代码看起来像这样

<div class="video-uploader-container">
   <combine-videos-display videos="videos" *ngIf="view = views.combine"> </combine-videos-display>
 <seperate-videos-display videos="videos" *ngIf="view = views.seperate"> </seperate-videos-display>
  <upload-only-videos-display videos="videos" *ngIf="view = views.uploadOnly"> </upload-only-videos-display>
</div>

我的问题是视图选项可以及时增加，我真的不想用更多* ngIf（或ngSwitchCase）和更多组件来增加视频上传器的大小。

我想在transclude中设置desiered视图组件，但我的问题是视频正在视频上传器容器中创建。 有一个更好的方法吗？我不想要视频上传器容器  必须知道所有观点组件。

Answer 1

我会使用@ContentChild来引用TemplateRef和ngTemplateOutlet以将videos作为上下文传递到ng-template：

视频-uploader.ts

@Component({
  selector: 'video-uploader',
  template: `
    <div class="video-uploader-container">
       <ng-container *ngTemplateOutlet="template; context: { $implicit: videos }">
       </ng-container>
    </div>
  `
})
export class ViewUploaderComponent {
  videos: any;

  @ContentChild(TemplateRef) template: TemplateRef<any>;

  ngOnInit() {
    this.videos = [
        {
            name: 'video1',
            url: 'test'
        },
        {
            name: 'video2',
            url: 'test'
        }
    ];
  }
}

和父组件可能看起来像

<video-uploader>
  <ng-template let-videos>
    <combine-videos-display [videos]="videos"></combine-videos-display>
  </ng-template>
</video-uploader>

<强> Plunker Example