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> 

지금 나는 여기, '아이템이'ID로 사업부를 가지고 탐색 바을하는 것이 ID가 "옆 사업부"와 사업부 아래에 표시 있도록를 추가합니다. 이렇게 쉽게 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을 사용할 수 있습니다. 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>