Question

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

<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带上div，＆＃39; item-2＆＃39;并将其附加到导航栏，使其显示在ID为＃34; side-div＆＃34;的div下方。我可以使用javascript的appendChild函数轻松完成此操作。

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

但是，我希望能够在组件的打字稿文件中执行此操作。 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/

Answer 2

如果您不想使用ElementRef

，也可以执行此类操作

使用服务或组件变量来控制位置：

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

  <div id="middle-div">

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

  </div>
  <div id="item-2" *ngIf="newPos"></div>
</nav>
</my-app>

以角度2操纵HTML元素的位置

2 个答案: