document.getElementById ¿reemplazo en angular4 / mecanografiado?

89

Entonces, estoy trabajando con angular4 en mi trabajo de práctica y esto es nuevo para mí. Afortunadamente, para obtener elementos html y sus valores utilicé <HTMLInputElement> document.getElementByIdo <HTMLSelectElement> document.getElementById

Me pregunto si hay algún reemplazo para esto en angular

angular typescript

— Nino Gutiérrez
fuente

2

¿Por qué no usar getElementById?

— Suren Srapyan

1

¿Por qué quieres hacer esto?

— Léo R.

Me pregunto si hay una forma angular de obtener elementos.

— Nino Gutierrez

138

Puede etiquetar su elemento DOM usando #someTag, luego obtenerlo con @ViewChild('someTag').

Ver ejemplo completo:

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

console.logimprimirá algo de texto .

— Alexandre Annic
fuente

Aparece el error Error: No se puede resolver '@ angular / core / src / metadata / di' Error: No se puede resolver '@ angular / core / src / linker / element_ref'

— Nino Gutierrez

2

nvm, resuelto importando así. importar {Component, OnInit, ViewChild, ElementRef} desde '@ angular / core';

— Nino Gutierrez

17

no funcionará si tiene un elemento dom condicional como * ngFor, * ngIf, etc.

— Ravindra Thorat

Angular 8+ requiere dos argumentos para el decorador de ViewChild.

¿Cómo puedo agregar #myDiv solo si una condición es verdadera? Por ejemplo: con id puedo hacer [id] = "isValid? 'MyDiv': ''. Gracias

— daniel8x

77

Simplemente puede inyectar el token DOCUMENT en el constructor y usar las mismas funciones en él

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 

@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById('el');
   }
}

O si el elemento que desea obtener está en ese componente, puede usar referencias de plantilla .

— Suren Srapyan
fuente

24

Para Angular 8 o posterior, @ViewChild tiene un parámetro adicional llamado opts, que tiene dos propiedades: read y static, read es opcional. Puedes usarlo así:

// ...
@ViewChild('mydiv', { static: false }) public mydiv: ElementRef;

constructor() {
// ...

<div #mydiv></div>

NOTA: Estático: ya no se requiere falso en Angular 9. (justo { static: true }cuando va a usar esa variable dentro de ngOnInit)

— Gustavo Santamaría
fuente

1

Funciona cuando oculta o muestra elementos dinámicamente usando *ngIf. ¿Cómo estás creando el elemento?

— Gustavo Santamaría

7

  element: HTMLElement;

  constructor() {}

  fakeClick(){
    this.element = document.getElementById('ButtonX') as HTMLElement;
    this.element.click();
  }

— Cesar Devesa
fuente

2

Esto es muy inseguro (ejecutar este comando en Angular Universal causa un bloqueo) y solo debe usarse si no hay otra opción posible (también considere que el elemento puede no estar presente)

— Joniras

2

M @ Joniras ¿por qué es muy inseguro?

— Sumi Straessle

6

Prueba esto:

Código de archivo TypeScript:

(<HTMLInputElement> document.getElementById ("nombre")). Valor

Código HTML:

 <input id = "name" type = "text" #name />

— Swati
fuente