如何获得dom元素在角度2

参见英文答案 > angular 2 / typescript : get hold of an element in the template                                    
我有一个具有p元素的组件。它的onClick事件会将其更改为textarea,以便用户可以编辑数据。我的问题是:

>我怎么能把焦点放在textarea上?
>我如何才能到达元素,所以我可以把.focus()放在它上面?
>我可以避免使用document.getElemenntById()吗?

我试图使用“ElementRef”和“@ViewChild()”,但似乎我错过了一些:

// ------ THE CLASS
@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');
  }

// ------ THE COMPONENT
<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>
使用#localvariable的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');
}

于二月二十三日(三月)/二十七日更新

新方法

请注意Angular v4.0.0-rc.3(2017-03-10)几件事情已经改变。
由于Angular团队将会废弃invokeElementMethod,以上代码不再可以使用。

BREAKING CHANGES

since 4.0 rc.1:

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。

注意:您可以使用具有/不具有ViewChild变量的Rendere2的以下方法来执行许多操作。

enter image description here

http://stackoverflow.com/questions/38944725/how-to-get-dom-element-in-angular-2

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:如何获得dom元素在角度2