模板中的Angular 4模板

Question

我正在尝试创建自定义滑块。问题是我有两个滑块在我的项目中完全相同的功能，但与两个不同的html结构。第一个滑块项目将如下所示：

<li> 
  <h2>Title</h2>
  <img src="url">
  <span>1000 items</span>
</li>

第二个滑块将如下所示：

<li> 
  <div>
    <img src="url">
    <h2>Title</h2>
  </div>
  <div>
    <span>1234 count</span>
    <span>4321 count</span>
  </div>
</li>

我有一个解决方案，当你在一个模板中渲染旋转木马

<div class="carousel">
  <ul class="slides">
    <li *ngFor="#image of images">
      <h2>{{image.title}}</h2>
      <img src="{{image.url}}" alt="">
    </li>
  </ul>
</div>

然后像这样使用它：

<css-carousel [imageUrl]="url" [title]="title"></css-carousel>

但是，在这种情况下，我只能在html场景中使用它。

问题：

是否可以在一个父组件中传递自定义html模板，这样我就可以对不同的html标记使用相同的逻辑？

也许传递模板本身是可能的？

Answer 1

如果您使用@Input() for sources并使用ngFor循环来创建组件，该怎么办

您还可以遍历您的组件并使用输入指令附加它们自己，这可能会起作用