javascript - form - viewchild angular core

¿Qué es ViewChild en Angular2?

Question

De la documentation 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 bien para qué se usa.

Considera este example de un blog que encontré.

@ViewChild(TodoInputCmp) el @ViewChild(TodoInputCmp) no tiene efecto en el código dentro de TodoInputCmp

¿Alguien me puede dar una idea?

Gracias

Answer 1

@viewchild()

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

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

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

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

  @ViewChild(''myReference'') myClassproperty;

El uso de @viewchild() hará diferentes cosas en función de dónde se colocó la referencia:

1. Cuando se colocó la referencia en un componente html, se inyectará el componente DOM html en el modelo como una propiedad de clase (myClassproperty en este ejemplo). Entonces 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). Entonces podemos acceder a esta propiedad en el modelo usando this.myClassproperty

Por @viewchild() tanto, @viewchild() es muy conveniente para inyectar otros componentes secundarios o elementos HTML secundarios en la clase modelo. El componente principal ahora puede reaccionar según el comportamiento de sus componentes secundarios y elementos html, que es una característica que a menudo se requiere.

Advertencia:

También es importante tener en cuenta que debe colocar @viewchild() en un gancho ngAfterViewInit() . Esto se debe a que solo puede tener acceso a los elementos en la vista después de que se procesen.

Answer 2

El decorador ViewChild se usa para obtener acceso a un componente secundario, que se encuentra en la plantilla, para que pueda acceder a sus propiedades y métodos.

Answer 3

Proporciona una referencia a los 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);
  }
}

Las variables no se inicializan antes de ngAfterViewInit()