克隆组件实例

Question

我正在尝试创建一个可以滑动的滑块，它只使用角度和锤子。幻灯片将按照[1, 2, 3]等基本顺序进行，但为了创建loop功能，需要使用类似[clone 3, 1, 2, 3, clone 1]的内容。

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

示例在这里 - 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

Answer 1

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

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

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

我认为您不想在DOM级别解决此问题，出于多种原因，这不是可行的解决方案。通常，Angular Team出于显而易见的原因不鼓励直接进行DOM操作。