angular - 将组件移动到 Angular 中的另一个父组件

Question

这个问题是this question的Angular版本.

以下片段总结了我的第一次尝试:

class NewParentComponent {

  constructor(elRef: ElementRef) {
    elRef.nativeElement.appendChild(myMovableElement);
    // where the reference to myMovableElement may come from a service.
  }
}

这种尝试带来了以下问题:

1. 我们不应该直接在 Angular 中操作 DOM。 Renderer 是否可以以某种方式移动组件？ (答案:根据 cgTag's answer ，使用 Renderer2 )。
2. 如果原始父组件在子组件移动后被销毁，则在子组件上调用 ngOnDestroy 方法。

参见 this Plunker证明问题。这个 Plunker 建立在 Angular Dynamic Component Loader example 之上.打开浏览器控制台日志，注意“destroyed!”每次广告横幅更改时都会记录文本，即使是“拖拽我!”文本被拖入下拉框。

Answer 1

可以使用 ViewContainerRef 将子组件从一个父组件移动到另一个父组件:

oldParentViewContainerRef.detach(index);
newParentViewContainerRef.insert(viewRef);

index 是 View 容器中子组件 View 的索引。可以使用以下方法获得:

let index = oldParentViewContainerRef.indexOf(viewRef);

viewRef对应子组件的 View 。如果子组件是在 ComponentFactoryResolver 的帮助下以编程方式创建的，则您只能获取 viewRef (请参阅下面的 Angular v13 编辑):

let factory = componentFactoryResolver.resolveComponentFactory(MyChildComponentType);
let componentRef = oldParentViewContainerRef.createComponent(factory);
let viewRef = componentRef.hostView;

这里的要点是，如果您希望能够在不同的父组件之间移动组件，请确保以编程方式创建这些可移动组件，而不是在 HTML 中静态创建。这给你一个 ViewRef这些可移动组件的实例，与 ViewContainerRef 一起很好地工作.

查看工作 Plunker举个例子。

编辑:Angular v13

从 Angular v13 开始，ComponentFactoryResolver不再需要以编程方式创建组件。现在可以按如下方式创建组件:

let componentRef = oldParentViewContainerRef.createComponent(MyChildComponentType);
let viewRef = componentRef.hostView;