각도 구성 요소에서 DOM 조작을 수행하는 방법은 무엇입니까?

Question

각도 요소 (버전 2.x 이상)에서 DOM 요소를 얻는 방법은 무엇입니까? addClass, removeClass 등의 기본 함수는 타이프 스크립트에서 사용할 수 없습니다. 따라서 각도 구성 요소에서 이러한 DOM 조작을 수행하려면 어떻게해야합니까? 있을 경우 제안하십시오. TIA

Answer 1

addClass, removeClass 등과 같은 기본 기능은

그들은 사용할 수 있습니다 타이프 라이터

에서의 availble 수 없습니다. JS에서 수행 할 수있는 모든 작업은 TypeScript에서 수행 할 수 있습니다. 이 Angular2

어떻게 불가피 DOM을 수정하지 않도록 대신 바인딩을 사용한다 Angular2에 있음을 의미하며, 요소 angular 2/typescript : get hold of an element in the template

에 대한 참조를 얻기 위해 몇 가지 설명과 함께 사용되는 낙담하는 동안에 당신은 또한 jQuery을 사용할 수 있습니다 *ngFor, *ngIf, ...과 같은 구조 지시문은 [class.class-name']="true" 또는 ngClass 같은 지시문과 같습니다.

자세한 내용은 https://angular.io/docs/ts/latest/guide/

Answer 2

당신은이 방법으로 ViewChild 데코레이터를 사용하여 DOM 요소에 도달 할 수 있습니다 참조하십시오 : 당신이 선택

누구 지정할 수있어

@Component({ 
    .... 
    templateUrl: 'mytemplate.html' 
}) 

export class MyComponent{ 
    @ViewChild('selector') private someName; 
    constructor() { 
    //this is your dom 
    //this.someName.nativeElement 
    } 

} 

과 템플릿 클래스

<div #selector> </div> 

또는 ElementRef 클래스를 사용할 수 있습니다.

import {Component, AfterViewInit,ElementRef} from "@angular/core"; 

export class MyComponent implements AfterViewInit { 

    constructor(protected elementRef: ElementRef) { 

    } 

    ngAfterViewInit() { 
     //you can reach your dom element by using 
     //this.elementRef.nativeElement 
    } 
} 

typescript 내에서 addClass, removeClass에 대해 Jquery와 같은 제 3 자 라이브러리를 자유롭게 사용할 수 있습니다.