处理角度为2的HTML元素的位置

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> 

现在，这里我想借此DIV ID为，“项目2”和追加它，使它看起来ID为“边格”的DIV下方NAV吧。 我可以很容易地做到这一点与这样的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); 
    } 
} 

一个plunker例如： 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>