javascript - examples - Llamar a un método del componente hijo

angularjs tutorial

Question

Tengo un componente hijo anidado como este:

<app-main>
    <child-component />
</app-main>

Mi componente appMain necesita invocar un método en el componente secundario.

¿Cómo invocar un método en el componente hijo?

Answer 1

El padre y el niño pueden comunicarse a través del enlace de datos.

Ejemplo:

@Component({
    selector: ''child-component'',
    inputs: [''bar''],
    template: `"{{ bar }}" in child, counter  {{ n }}`
})
class ChildComponent{
    constructor () {
        this.n = 0;
    }
    inc () {
        this.n++;
    }
}

@Component({
    selector: ''my-app'',
    template: `
        <child-component #f [bar]="bar"></child-component><br>
        <button (click)="f.inc()">call child func</button>
        <button (click)="bar = ''different''">change parent var</button>
    `,
    directives: [ChildComponent]
})
class AppComponent {
    constructor () {
        this.bar = ''parent var'';
    }
}

bootstrap(AppComponent);  

Demo

#f crea una referencia al componente hijo y se puede usar en una plantilla o pasar a la función. Los datos del padre se pueden pasar mediante el enlace [ ] .

Answer 2

La mejor manera de acceder a un componente hijo es @ViewChild .

Digamos que tiene AppMainComponent con un ChildComponent anidado de su ejemplo.

// app-main.component.ts
import { Component } from ''@angular/core'';

@Component({
    selector: ''app-main'',
    template: `
        <child-component />
    `
})

export class AppMainComponent {}

Desea invocar un método claro de su ChildComponent.

// child.component.ts
import { Component } from ''@angular/core'';

@Component({
    selector: ''child-component'',
    template: ''{{ greeting }}''
})

class ChildComponent {
    greeting: String = ''Hello World!'';

    clear() {
        this.greeting = null;
    }
}

Puede lograrlo importando la clase ChildComponent, el decorador ViewChild y pasar la clase del componente como una consulta. De esta manera, tendría acceso a la interfaz de ChildComponent almacenada en la variable personalizada. Aquí hay un ejemplo:

// app-main.component.ts
import { Component, ViewChild } from ''@angular/core'';
import { ChildComponent } from ''./components/child/child.component'';

@Component({
    selector: ''app-main'',
    template: `
        <child-component />
    `
})

class ChildComponent {
    @ViewChild(ChildComponent)
    child: ChildComponent;

    clearChild() {
        this.child.clear();
    }
}

¡Aviso! La vista ngAfterViewInit solo está disponible después de ngAfterViewInit .

Responda después de que Angular inicialice las vistas del componente y las vistas secundarias. Llamado una vez después del primer ngAfterContentChecked (). Un gancho solo para componentes.

Si desea ejecutar el método automáticamente, debe hacerlo dentro de este enlace de ciclo de vida.

También puede obtener una QueryList de QueryList de componentes secundarios a través del decorador ViewChildren .

import { Component, ViewChildren, QueryList } from ''@angular/core'';
import { ChildComponent } from ''./components/child/child.component'';

...

@ViewChildren(ChildComponent)
children: QueryList<ChildComponent>;

QueryList puede ser muy útil, por ejemplo, puede suscribirse para cambios secundarios.

También es posible crear variables de referencia de plantilla y obtener acceso a ellas a través del decorador ViewChild.

Answer 3

Puede obtener una referencia a un elemento utilizando

@ViewChild(''childComponent'') child;

donde childComponent es una variable de plantilla <some-elem #childComponent > `o

@ViewChild(ComponentType) child;

donde ComponentType es el tipo de componente o directiva y luego en ngAfterViewInit o un controlador de eventos llama a child.someFunc() .

ngAfterViewInit() {
  console.log(this.child);
}

Consulte también obtener un elemento en la plantilla

Answer 4

Siendo un componente hijo

@Component({
    // configuration
    template: `{{data}}`,
    // more configuration
})
export class Son {

  data: number = 3;

  constructor() { }

  updateData(data:number) {
    this.data = data;
  }

}

Tener un componente padre

@Component({
    // configuration
})
export class Parent {
  @ViewChild(Son) mySon: Son;

  incrementSonBy5() {
    this.mySon.updateData(this.mySon.data + 5);
  }
}

En la plantilla del padre

<son></son>
<button (click)="incrementSonBy5()">Increment son by 5</button>

Esta solución solo funciona para una instancia de <son></son> en la plantilla principal. Si tiene más de una instancia, solo funcionará en la primera de la plantilla.