javascript - 操作 Angular 2 中 HTML 元素的位置

Question

我有一个像这样的 Angular 组件模板。

<my-app>
  <nav id="nav-bar">
    <ul>
     <li id="item-1"></li>
     <li>
        <div id="item-2"></div>
     </li>
     <li id="item-3"></li>

  <div id="middle-div">

  </div>
  <div id="side-div">

  </div>

</nav>
</my-app>

现在我想获取 id 为“item-2”的 div 并将其附加到导航栏，以便它出现在 id 为“side-div”的 div 下方。我可以使用 javascript 的appendChild 函数轻松地做到这一点，如下所示。

var item = document.getElementById("item-2");
var nav = document.getElementById("nav-bar");
//change position of searchform in DOM
nav.appendChild(item);

但是，我希望能够在组件的 typescript 文件中执行此操作。 ElementRef 是一个理想的解决方案吗？或者还有其他方法可以实现这一目标吗？

组件看起来像这样:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: '/app/Templates/nav.html',
providers: [MyService]
})

export class MyComponent implements OnInit {
  constructor(){
  }

  ngOnInit(){
  }
}

Answer 1

您可以使用appendChild使用ElementRef 。这是一个例子

@Component({
  selector: 'app',
  template: `
    <div>
      <button type="button" (click)="appendToChild()">Append Item to Child</button>

      <div #item>Item</div>

      <div #appendToChildEl></div>
    </div>
  `
})
export class App {

  @ViewChild('item') item: ElementRef;
  @ViewChild('appendToChildEl') appendToChildEl: ElementRef;


  appendToChild() {
    this.appendToChildEl.nativeElement.appendChild(this.item.nativeElement);
  }
}

一个笨蛋的例子: https://embed.plnkr.co/7DJ1nWN6sl563hcR71FV/