nativeelement - Cómo obtener el elemento dom en angular 2

nativeelement angular 4

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo seleccionar un elemento en una plantilla de componente? 10 respuestas

Tengo un componente que tiene un elemento p . Su evento onClick lo cambiará a un área de textarea para que el usuario pueda editar los datos. Mi pregunta es:

• ¿Cómo puedo enfocarme en el área de texto?
• ¿Cómo puedo alcanzar el elemento para poder aplicar el .focus () en él?
• ¿Puedo evitar usar document.getElemenntById ()?

Intenté usar el "ElementRef" y el "@ViewChild ()", pero parece que me falta algo:

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

Answer 1

Use ViewChild con #localvariable como se muestra aquí,

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

En componente,

Manera más antigua

import {ElementRef} from ''@angular/core'';
@ViewChild(''someVar'') el:ElementRef;
ngAfterViewInit()
{
this.el.nativeElement.focus();
}

Vieja forma

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

Actualizado el 22/03 (marzo) / 2017

Nueva manera

Tenga en cuenta que desde Angular v4.0.0-rc.3 (2017-03-10) se han cambiado algunas cosas. Dado que el equipo de Angular despreciará invokeElementMethod , el código anterior ya no se puede usar.

ROMPIENDO CAMBIOS

desde 4.0 rc.1:

renombrar RendererV2 a Renderer2
renombrar RendererTypeV2 a RendererType2
renombrar RendererFactoryV2 a 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) le dará los siguientes métodos y puede ver que invokeElementMethod no está allí. Adjuntar img todavía no está documentado.

NOTA: Puede utilizar los siguientes métodos de Rendere2 con / sin la variable ViewChild para hacer tantas cosas.

Answer 2

Actualización (usando el procesador):

Tenga en cuenta que el servicio Renderer original ahora ha quedado en desuso a favor de Renderer2

como en el documento oficial de Renderer2.

Además, como señaló @ GünterZöchbauer:

En realidad, usar ElementRef está bien. También está bien usar ElementRef.nativeElement con Renderer2. Lo que se desaconseja es acceder a las propiedades de ElementRef.nativeElement.xxx directamente.

Puede lograr esto utilizando elementRef y ViewChild . sin embargo, no es recomendable usar elementRef debido a:

• problema de seguridad
• acoplamiento apretado

como lo señala la documentación oficial de ng2 .

1. Usando elementRef (acceso directo):

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

2. Usando ViewChild ( mejor enfoque ):

<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. Usando el 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 Final:

Descubrí que usar un setter ViewChild es la forma más confiable de establecer el foco de control de formulario inicial:

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

Primero se llama al setter con un valor undefined seguido de una llamada con un ElementRef inicializado.

Ejemplo de trabajo y fuente completa aquí: http://plnkr.co/edit/u0sLLi?p=preview

Uso de TypeScript 2.0.3 Final / RTM, Angular 2.0.0 Final / RTM y Chrome 53.0.2785.116 m (64 bits).

ACTUALIZACIÓN para Angular 4+

Renderer ha quedado en desuso a favor de Renderer2 , pero Renderer2 no tiene el invokeElementMethod . Deberá acceder al DOM directamente para establecer el foco como en input.nativeElement.focus() .

Todavía encuentro que el enfoque de establecimiento de ViewChild funciona mejor. Cuando uso AfterViewInit , a veces obtengo la read property ''nativeElement'' of undefined error 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);
}
}