如何在 Angular 2 中获取“DOM 元素”？ [复制]

Question

我有一个包含<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>

Answer 1

将 ViewChild 与 #TemplateVariable 一起使用，如下所示，

<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 日（3 月）更新** ＃新的方法

请注意，Angular 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 尚未记录。

注意：您可以使用以下 Rendere2 方法（带/不带 ViewChild 变量）来做很多事情。

Answer 2

更新（使用渲染器）：

请注意，原来的 Renderer 服务现已在 Renderer2的青睐

如Renderer2 official doc.

此外，正如@GünterZöchbauer 指出的那样：

其实用 ElementRef 就好了。也使用 带有 Renderer2 的 ElementRef.nativeElement 很好。什么是气馁 正在直接访问 ElementRef.nativeElement.xxx 的属性。

---

您可以通过使用elementRef 以及ViewChild 来实现此目的。但是不建议使用elementRef，原因是：

• 安全问题
• 紧密耦合

正如official ng2 documentation所指出的那样。

1。使用elementRef（直接访问）：

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

2。使用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();

  }
}

3。使用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();
      }

    }

Answer 3

Angular 2.0.0 最终版：

我发现使用ViewChild setter 是设置初始表单控件焦点的最可靠方法：

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

首先使用 undefined 值调用 setter，然后使用初始化的 ElementRef 调用。

工作示例和完整来源：http://plnkr.co/edit/u0sLLi?p=preview

使用 TypeScript 2.0.3 Final/RTM、Angular 2.0.0 Final/RTM 和 Chrome 53.0.2785.116 m（64 位）。

Angular 4+ 更新

Renderer 已弃用，取而代之的是 Renderer2，但 Renderer2 does not have invokeElementMethod。您将需要直接访问 DOM 以设置焦点，如 input.nativeElement.focus()。

我仍然发现 ViewChild setter 方法效果最好。使用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);
    }
}