如何在Angular 2中获取`DOM Element`？ [英] How to get `DOM Element` in Angular 2?

问题描述

我有一个具有< p> 元素的组件。它的（点击）事件会将其更改为< textarea> 。因此，用户可以编辑数据。我的问题是：

I have a component that has a <p> element. It's (click) event will change it into a <textarea>. So, the user can edit the data. My question is:

• 我如何关注 textarea ？


• 如何获取元素，因此可以在其上应用 .focus（）？


• 可以我避免使用 document.getElemenntById（）？

• How can I make the focus on the textarea?
• How can I get the element, so I can apply the .focus() on it?
• Can I avoid using document.getElemenntById()?

我尝试使用 ElementRef ;和 @ViewChild（）但是似乎缺少了一些东西：

I have tried to use the "ElementRef" and the "@ViewChild()" however it seems that I'm missing something:

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>

推荐答案

将 ViewChild 与 #localvariable ，如下所示，

<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');
}

---

已于22/03更新（ 3月）/ 2017

请注意 Angular v4.0.0 -rc.3（2017-03-10）几处更改。
由于Angular团队将弃用 invokeElementMethod ，因此上述代码将无法再使用。

Please note from Angular v4.0.0-rc.3 (2017-03-10) few things have been changed. Since Angular team will deprecate invokeElementMethod, above code no longer can be used.

更改突破

BREAKING CHANGES

自4.0 rc.1起：

since 4.0 rc.1:

重命名RendererV2到Renderer2

重命名RendererTypeV2到RendererType2

重命名RendererFactoryV2到RendererFactory2

rename RendererV2 to Renderer2
rename RendererTypeV2 to RendererType2
rename RendererFactoryV2 to 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。

注意：您可以使用以下 Rendere2 带有/不带有 ViewChild变量，可以执行很多操作。

NOTE: You can use following methods of Rendere2 with/without ViewChild variable to do so many things.

这篇关于如何在Angular 2中获取`DOM Element`？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！