[解決済み] Angular 2で`DOM Element`を取得する方法は？[重複しています］

質問

あるコンポーネントに <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.html

<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>

解決方法は？

使用方法 ビュー子 と # テンプレート変数 このように

<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/03/22(木)更新** #新・方法

からご注意ください。 アンギュラー v4.0.0-rc.3 (2017-03-10) いくつかの点が変更されています。 Angular チームが invokeElementMethod ということで、上記のコードはもう使えません。

変更点

4.0 rc.1以降。

<ブロッククオート

RendererV2 を Renderer2 に改名。

RendererTypeV2 を RendererType2 にリネームする。

RendererFactoryV2 を RendererFactory2 にリネームしました。

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) は次のようなメソッドを提供し、あなたは今見ることができます。 invokeElementMethod がない。 imgの添付はまだ文書化されていません。

NOTE の以下のメソッドを使用することができます。 Rendere2 あり/なし ViewChild変数 を使えば、いろいろなことができるようになります。