Angular 5：动态组件位置互换实现方案问询

我懂你现在的困扰——动态加载的ID1和ID2组件，想用ViewContainerRef.move()互换位置却没成功对吧？咱们来一步步拆解问题，找到可行的解决办法。

先排查你可能踩的坑 #

你之前的尝试没成功，大概率是这几个原因：

• 时机不对：在组件视图还没初始化完成时就调用了move方法（比如在ngOnInit里），这时候ViewContainerRef还没拿到组件的视图引用。
• 索引错误：调用indexOf获取组件索引时返回了-1，说明组件不在你操作的这个ViewContainerRef容器里。
• 移动顺序错了：当两个组件的索引有大小关系时，先移动其中一个会改变另一个的索引，导致后续移动位置出错。

正确的实现步骤 #

下面是经过验证的互换方案，我会分代码和逻辑两部分说明：

1. 准备工作：保存组件引用与获取容器 #

首先，确保你在组件初始化完成后（ngAfterViewInit钩子）创建动态组件，并且把每个组件的ComponentRef存起来，方便后续操作：

import { Component, ViewChild, ViewContainerRef, ComponentRef, AfterViewInit } from '@angular/core';
import { ContainerRefDir } from './container-ref.directive'; // 你的自定义容器指令
import { DynamicComponent } from './dynamic.component'; // 你的动态组件

@Component({
  selector: 'app-root',
  template: `
    <div>
      <!-- 你的容器指令 -->
      <ng-template containerRef></ng-template>
      <button (click)="swapComponents()">点击互换组件</button>
    </div>
  `
})
export class AppComponent implements AfterViewInit {
  // 获取容器的ViewContainerRef引用
  @ViewChild(ContainerRefDir, { read: ViewContainerRef }) 
  private viewContainerRef!: ViewContainerRef;

  // 存储动态创建的组件引用，key为组件ID
  private componentRefs: {[key: number]: ComponentRef<DynamicComponent>} = {};

  ngAfterViewInit() {
    // 创建ID=1的动态组件
    const ref1 = this.viewContainerRef.createComponent(DynamicComponent);
    ref1.instance.id = 1; // 给动态组件设置ID（假设你的组件有id属性）
    this.componentRefs[1] = ref1;

    // 创建ID=2的动态组件
    const ref2 = this.viewContainerRef.createComponent(DynamicComponent);
    ref2.instance.id = 2;
    this.componentRefs[2] = ref2;
  }
}

2. 实现互换逻辑：两种可选方案 #

方案一：使用move方法（推荐，不销毁组件）

关键点是先获取两个组件的原始索引，再根据索引大小调整移动顺序：

swapComponents() {
  const ref1 = this.componentRefs[1];
  const ref2 = this.componentRefs[2];

  if (!ref1 || !ref2) return;

  // 获取两个组件在容器中的当前索引
  const index1 = this.viewContainerRef.indexOf(ref1.hostView);
  const index2 = this.viewContainerRef.indexOf(ref2.hostView);

  if (index1 === -1 || index2 === -1) {
    console.error('组件不在当前容器中，请检查创建逻辑');
    return;
  }

  // 根据索引大小调整移动顺序，避免索引变化导致错误
  if (index1 < index2) {
    // 先把ref1移到ref2的位置，再把ref2移到ref1原来的位置
    this.viewContainerRef.move(ref1.hostView, index2);
    this.viewContainerRef.move(ref2.hostView, index1);
  } else {
    // 反之，先移ref2到ref1的位置，再移ref1到ref2原来的位置
    this.viewContainerRef.move(ref2.hostView, index1);
    this.viewContainerRef.move(ref1.hostView, index2);
  }
}

方案二：先 detach 再 insert（兼容旧版本）

如果move方法还是有问题，可以用“移除再插入”的方式，这种方式更直观，不会受索引变化影响：

swapComponents() {
  const ref1 = this.componentRefs[1];
  const ref2 = this.componentRefs[2];

  if (!ref1 || !ref2) return;

  const index1 = this.viewContainerRef.indexOf(ref1.hostView);
  const index2 = this.viewContainerRef.indexOf(ref2.hostView);

  if (index1 === -1 || index2 === -1) {
    console.error('组件不在当前容器中');
    return;
  }

  // 先从容器中移除两个组件（不会销毁组件实例）
  this.viewContainerRef.detach(index1);
  // 注意：移除index1后，原index2的位置会变成index2-1（如果index1 < index2）
  const adjustedIndex2 = index1 < index2 ? index2 - 1 : index2;
  this.viewContainerRef.detach(adjustedIndex2);

  // 按相反顺序插入回容器
  this.viewContainerRef.insert(ref2.hostView, index1);
  this.viewContainerRef.insert(ref1.hostView, index1 + 1);
}

额外提示 #

• 如果你用的是Angular 13及以上版本，不需要ComponentFactoryResolver，直接用viewContainerRef.createComponent(DynamicComponent)就能创建组件，代码更简洁。
• 确保你的自定义容器指令（ContainerRefDir）正确暴露了ViewContainerRef，比如指令类里要注入ViewContainerRef并作为属性返回。

内容的提问来源于stack exchange，提问作者WasiF