Angular 2에서 'DOM Element'를 얻는 방법은?

Angular 2에서 'DOM Element'를 얻는 방법은?

이 질문에는 이미 다음과 같은 답이 있습니다.

구성 요소 템플릿에서 요소를 선택하려면 어떻게 해야 합니까? (14개 답변)

마감됨6년 전에.

다음과 같은 구성 요소가 있습니다.<p>원소의그건…(click)이벤트는 그것을 변화시킬 것입니다.<textarea>따라서 사용자는 데이터를 편집할 수 있습니다.다음과 같습니다.

• 어떻게 하면 집중할 수 있을까요?textarea?
• 어떻게 요소를 얻을 수 있습니까? 그래서 저는 적용할 수 있습니다..focus()그 위에?
• 사용을 피할 수 있습니까?document.getElemenntById()?

"ElementRef"와 "@ViewChild()"를 사용하려고 했지만 누락된 부분이 있는 것 같습니다.

app.component.ts

@ViewChild('tasknoteId') taskNoteRef:ElementRef;

noteEditMode: boolean = false;

get isShowNote (){
  return  !this.noteEditMode && this.todo.note  ? true : false;
}
taskNote: string;
toggleNoteEditMode () {
  this.noteEditMode = !this.noteEditMode; 
  this.renderer.invokeElementMethod(
    this.taskNoteRef.nativeElement,'focus'
  );
}

app.component.vmdk

<span class="the-insert">
  <form [hidden]="!noteEditMode && todo.note">
    <textarea #tasknoteId id="tasknote"
     name="tasknote"
     [(ngModel)]="todo.note"
     placeholder="{{ notePlaceholder }}"
     style="background-color:pink"
     (blur)="updateNote()" (click)="toggleNoteEditMode()"
     [autofocus]="noteEditMode"
     [innerHTML]="todo.note">
   </textarea>
 </form>
</span>

여기에 표시된 대로 #TemplateVariable과 함께 ViewChild를 사용합니다.

<textarea  #someVar  id="tasknote"
                  name="tasknote"
                  [(ngModel)]="taskNote"
                  placeholder="{{ notePlaceholder }}"
                  style="background-color: pink"
                  (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }} 

</textarea>
 

구성요소에서,

가장 오래된 방법

import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

ngAfterViewInit()
{
   this.el.nativeElement.focus();
}

---

올드 웨이

import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;
    
constructor(private rd: Renderer) {}
ngAfterViewInit() {
    this.rd.invokeElementMethod(this.el.nativeElement,'focus');
}

---

2017년 3월 22일 업데이트

뉴 웨이

Angular v4.0.0-rc.3(2017-03-10)에서 변경된 사항이 몇 가지 있습니다.Angular 팀이 더 이상 사용하지 않으므로 위 코드는 더 이상 사용할 수 없습니다.

변경 사항 깨기

4.0 rc.1 이후:

의 이름을 렌더러2로 합니다.
합니다. Rename RendererTypeV2를 RendererType2로 변경합니다.
RendererFactory 합니다. V2 이름은 RenendererFactory2로 변경됩니다.

import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor(private rd: Renderer2) {}

ngAfterViewInit() {
      console.log(this.rd); 
      this.el.nativeElement.focus();      //<<<=====same as oldest way
}

console.log(this.rd) 다음과 같은 방법을 제공할 것이며 지금은 없는 것을 알 수 있습니다.imgas를 첨부하는 것은 아직 문서화되지 않았습니다.

참고: ViewChild 변수를 사용하거나 사용하지 않는 다음 방법을 사용하여 많은 작업을 수행할 수 있습니다.

업데이트(렌더러 사용):

원래 렌더러 서비스는 이제 렌더러2를 위해 더 이상 사용되지 않습니다.

렌더러2 공식 문서에 따르면.

또한, @Günter Zöchbauer가 지적한 바와 같이,

실제로 ElementRef를 사용하는 것은 괜찮습니다.렌더러2와 함께 ElementRef.nativeElement를 사용해도 괜찮습니다.권장되지 않는 것은 ElementRef.nativeElement의 속성에 액세스하는 것입니다.xxx 직접.

---

다음을 사용하여 이를 달성할 수 있습니다.elementRef만 아니라 만뿐아라니에 도.ViewChild그러나 사용하는 것은 권장되지 않습니다.elementRef이유:

• 보안 문제
• 끈끈한 결합

공식 ng2 문서에 의해 지적된 바와 같이.

사용elementRef(직접 액세스):

export class MyComponent {    
constructor (private _elementRef : ElementRef) {
 this._elementRef.nativeElement.querySelector('textarea').focus();
 }
}

사용ViewChild(더 나은 접근 방식):

<textarea  #tasknote name="tasknote" [(ngModel)]="taskNote" placeholder="{{ notePlaceholder }}" 
style="background-color: pink" (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }} </textarea> // <-- changes id to local var


export class MyComponent implements AfterViewInit {
  @ViewChild('tasknote') input: ElementRef;

   ngAfterViewInit() {
    this.input.nativeElement.focus();

  }
}

사용renderer:

export class MyComponent implements AfterViewInit {
      @ViewChild('tasknote') input: ElementRef;
         constructor(private renderer: Renderer2){           
          }

       ngAfterViewInit() {
       //using selectRootElement instead of depreaced invokeElementMethod
       this.renderer.selectRootElement(this.input["nativeElement"]).focus();
      }

    }

각도 2.0.0 결승:

는 사용하것발다니습견했을을 하는 했습니다.ViewChild 폼 포커스를 할 수 방법입니다. setter 초 제 포 스 를 설 하 는 가 니 방 다 입 법 있 는 수 할 신 뢰 장 는 정 기 커 폼 어 다 니 ▁set ▁to 입 : ▁control ▁the ▁way set

@ViewChild("myInput")
set myInput(_input: ElementRef | undefined) {
    if (_input !== undefined) {
        setTimeout(() => {
            this._renderer.invokeElementMethod(_input.nativeElement, "focus");
        }, 0);
    }
}

세터는 처음에 다음과 같이 호출됩니다.undefined된 " 음에다초호나출옵다니이된화기"가 .ElementRef.

작업 예제 및 전체 소스: http://plnkr.co/edit/u0sLLi?p=preview

TypeScript 2.0.3 Final/RTM, Angular 2.0.0 Final/RTM 및 Chrome 53.0.2785.116m(64비트)를 사용합니다.

Angular 4+에 대한 업데이트

Renderer을 위해 더 이상 사용되지 않습니다.Renderer2,그렇지만Renderer2 를 가지고 있지 않습니다.invokeElementMethodDOM에 직접 액세스하여 과 같이 포커스를 설정해야 합니다.input.nativeElement.focus().

저는 여전히 ViewChild 세터 접근법이 가장 잘 작동한다는 것을 발견하고 있습니다.사용 시AfterViewInit나는 가끔 받습니다.read property 'nativeElement' of undefined오류

@ViewChild("myInput")
set myInput(_input: ElementRef | undefined) {
    if (_input !== undefined) {
        setTimeout(() => { //This setTimeout call may not be necessary anymore.
            _input.nativeElement.focus();
        }, 0);
    }
}

언급URL : https://stackoverflow.com/questions/38944725/how-to-get-dom-element-in-angular-2