Javascript 创建一个"；克隆；含有ng含量的Angular2成分

我正在使用angular 2创建一个3d“卡片翻转”。父“卡翻转”组件包含嵌套的“卡翻转前”和“卡翻转后”组件

<card-flip card-flip-id="demo-1" class="grid_col-6">
  <card-flip-front class="card">
    <div class="card__inner">
      Card Front
    </div>
  </card-flip-front>
  <card-flip-back class="card">
    <div class="card__inner">
      Card Back
    </div>
  </card-flip-back>
</card-flip>

---

我认为您可以在

模板中有一个中间组件

，它是重复的，并接收

的

比如：

@Component(
   selector = 'card-flip',
   template = `
   <card-flip-content #theOne>
      <ng-content />
   </card-flip-content>
   <card-flip-content #theClone>
      <ng-content />
   </card-flip-content>
`)

@组件(
选择器='卡片翻转'，
模板=`
`)

然后根据需要将数据绑定到克隆，并仅为克隆设置动画。 这种方式可以有@Input和@Output，从而让父组件解释一个组件的操作，以便对另一个组件进行操作

<card-flip card-flip-id="demo-1" class="grid_col-6">
  <card-flip-front class="card">
    <div class="card__inner">
      Card Front
    </div>
  </card-flip-front>
  <card-flip-back class="card">
    <div class="card__inner">
      Card Back
    </div>
  </card-flip-back>
</card-flip>

---

那行吗？

谢谢你的想法，但我想我可能是误解了。在您提供的示例中，您两次使用ng内容。只有第一个ng内容标签将包含投影内容，因此主要问题仍然存在。ng内容的此限制是预期行为，本文将详细讨论