Angular，通过类引用移动组件而不创建/销毁它们

Question

所以我想移动一个 Angular 组件，我很清楚我可以通过构造和破坏来完成它，例如这个例子: https://stackblitz.com/edit/angular-t3rxb3?file=src%2Fapp%2Fapp.component.html

但是我有一个场景，我的组件已经是 dom 的一部分，并且想简单地按原样在 dom 中移动它们(不是创建而是只是移动 dom 中的位置)。

我有对源和目标类位置的引用:

const dom: HTMLElement = this.el.nativeElement;
const elements1 = dom.querySelectorAll('.sourceClass');
const elements2 = dom.querySelectorAll('.destinationClass');

在线查看，但示例似乎没有移动，并且想通过各种方式避免使用 jQuery。

如果我使用 jQuery，我会使用

jQuery('.destination').appendTo('.source');

效果不错...谢谢

肖恩

Answer 1

我真的不确定您到底想要什么，但我想说 Renderer2 会满足您的需要。

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1> 
  <child1 #child1></child1>
  <div #enmptyBox class="empty-box">
  </div>
  <br>
  <button (click)='moveChild1()'>move comp1 to empty box</button>
  `,
  styles: [`h1 { font-family: Lato; } .empty-box{border: 1px dotted; height: 100px; width: 500px}`]
})
export class HelloComponent {
  @Input() name: string;
  @ViewChild("child1", { read: ElementRef }) child1;
  @ViewChild("enmptyBox", { read: ElementRef }) enmptyBox;

  constructor(private elRef:ElementRef, private renderer: Renderer2) {}

  moveChild1() {
    // first approach 
    this.renderer.appendChild(this.enmptyBox.nativeElement,this.child1.nativeElement);
    // second approach
    this.renderer.appendChild(this.elRef.nativeElement.querySelector('.empty-box'),this.child1.nativeElement);
  }
}

这是一个完整的 stackblitz demo