克隆组件实例答案

【问题标题】：Clone Component instances克隆组件实例
【发布时间】：2018-02-26 07:53:39
【问题描述】：

我正在尝试创建一个仅使用 angular 和hammerjs 的可滑动小滑块。幻灯片将按照[1, 2, 3] 等基本顺序进行，但为了创建loop 功能，它需要类似于[clone 3, 1, 2, 3, clone 1]。

我有一个滑块作为组件<hammer-slider>，每张幻灯片也是一个组件<hslide>。然后我在容器 comp 上使用并收集所有 hslide 组件的 QueryList，这是我假设我能够克隆 <hslide> 的实例并将它们弹出到幻灯片内容或 @987654330 的地方@ 在我的例子中。

示例在这里 - https://stackblitz.com/edit/angular-hammer-slider?file=app%2Fhammer-slider%2Fhammer-slider.component.ts

// This gets me the slides;
@ContentChildren(HSlideComponent) hslides: QueryList<HSlideComponent>

// You can see my attempts 
ngAfterViewInit(){
  console.log(this.hslides);

我使用createEmbeddedView 等方法的大多数尝试似乎都在移动而不是复制元素，也没有保留样式。

我不知道我是否只是遗漏了一些简单的东西，或者这是否可能，或者我可能完全做错了。

不寻找推荐给 npm install some-other-slider

【问题讨论】：

也许stackoverflow.com/questions/36325212/… 中所示的方法将有助于解决您的要求。
我认为这个例子是按类型动态创建组件，但我的问题是组件hslides 已经创建并且是视图的一部分。我想复制第一个和最后一个视图。
我们没有复制组件这样的事情。
那么有没有办法获取组件的实例并显示它或元素HTML两次？这似乎是一个常见的概念，它甚至会排除在此用例中将幻灯片作为组件的想法，除非您强制最终用户添加[ last | all-slides | first ]。或者为所有设计模式提供幻灯片模板，并且只允许对象数据。
如果您需要多个，请使用*ngFor

标签： angular

【解决方案1】：

所以，我正在做完全相同的编码挑战。

您是否考虑过设置一个 BehaviorSubject 模式来促进滑块的父组件和滑块本身之间的通信？

您可以有效地向父组件发信号通知您需要完成的操作（即克隆项目 [1,2,3] 以及此项目在列表中的位置（例如前端或末尾）]。

我认为您不想在 DOM 级别解决这个问题，这不是一个可行的解决方案，原因有很多。通常 Angular 团队不鼓励直接的 DOM 操作，原因很明显。

【讨论】：