Búsqueda de sitios web

javascript - ¿Qué es ViewChild en Angular2?

De la documentación oficial. Un ViewChild:

Configures a view query.

View queries are set before the ngAfterViewInit callback is called.

La explicación es muy mínima y todavía no entiendo muy bien para qué se utiliza.

Considera este ejemplo de un blog que encontré.

Quitar el @ViewChild(TodoInputCmp) no tiene ningún efecto en el código dentro de TodoInputCmp

¿Alguien puede darme alguna idea?

Gracias

Respuesta #1

Proporciona una referencia a elementos o componentes en su vista:

@Component({
  ...
  directives: [SomeComponent],
  template: `
  <div><span #myVar>xxx</span><div>
  <some-comp></some-comp>`
})
class MyComponent {
  @ViewChild('myVar') myVar:ElementRef;
  @ViewChild(SomeComponent) someComponent:SomeComponent;
  
  ngAfterViewInit() {
    console.log(this.myVar.nativeElement.innerHTML);
    console.log(this.someComponent);
  }
}

IMPORTANTE: Las variables no están inicializadas antes de ngAfterViewInit()

Respuesta #2

El decorador ViewChild se utiliza para obtener acceso a un componente hijo, que se encuentra en la plantilla, de modo que puedas acceder a sus propiedades y métodos.

Respuesta #3

@viewchild()

En Angular definimos una plantilla de un componente combinando HTML simple con otros componentes de Angular. En la vista (archivo html) podemos definir una variable de referencia de plantilla de la siguiente manera:

<input type="text" #firstNameInput>
<myDefaultComponent #reference></myDefaultComponent>

Usando variables de referencia de plantilla, los componentes y elementos HTML generalmente solo están disponibles dentro de la vista. Sin embargo, cuando queremos inyectar referencias del componente o elemento HTML e inyectarlas en nuestro modelo (archivo ts de la clase del componente), podemos usar @viewchild() para lograr esto.

Usamos el decorador @viewchild() de la siguiente manera:

  @ViewChild('myReference') myClassproperty;

Usar @viewchild() hará cosas diferentes según dónde se colocó la referencia:

  1. Cuando se colocó la referencia en un componente html, inyectará el componente HTML DOM en el modelo como una propiedad de clase (myClassproperty en este ejemplo). Luego podemos acceder a esta propiedad en el modelo usando this.myClassproperty
  2. Cuando la referencia se colocó en un componente Angular, inyectará el componente Angular en el modelo como una propiedad de clase (myClassproperty en este ejemplo). Luego, podemos acceder a esta propiedad en el modelo usando this.myClassproperty

Así, @viewchild() es muy conveniente para inyectar otros componentes hijos o elementos HTML hijos en la clase del modelo. El componente padre ahora puede reaccionar en función del comportamiento de sus componentes hijos y elementos HTML, lo cual es una característica que a menudo se requiere.

Advertencia:

También es importante señalar que debes colocar @viewchild() en un hook ngAfterViewInit(). Esto se debe a que solo puedes tener acceso a los elementos en la vista después de que se hayan renderizado.

Artículos relacionados