Rufen Sie eine Methode der untergeordneten Komponente auf

Ich habe eine geschachtelte untergeordnete Komponente wie folgt:

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

Meine appMain Komponente benötigt, um eine Methode aufzurufen, die auf die Kind-Komponente.

Gewusst wie: aufrufen einer Methode auf die Kind-Komponente?

InformationsquelleAutor der Frage Per Hornshøj-Schierbeck | 2015-06-23

  1. 64

    Erhalten Sie eine Referenz auf ein element mit

    @ViewChild('childComponent') child;

    wo childComponent ist eine template-Variablen <some-elem #childComponent>`, oder 

    @ViewChild(ComponentType) child;

    wo ComponentType ist der Typ einer Komponente oder die Richtlinie und dann in ngAfterViewInit oder eine event-Handler-Aufruf child.someFunc().

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

    Siehe auch besorgen Sie ein element in der Vorlage

    InformationsquelleAutor der Antwort Günter Zöchbauer

  2. 47

    Eltern und Kind kommunizieren können per Datenbindung.

    Beispiel:

    @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 wird eine Referenz auf die untergeordnete Komponente und kann verwendet werden, in der Vorlage "oder" bestanden " - Funktion. Daten, die vom übergeordneten Element übergeben werden kann durch [ ] verbindlich.

    InformationsquelleAutor der Antwort Alexander Ermolov

  3. 14

    Sein Sohn Komponente

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

  data: number = 3;

  constructor() { }

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

}

    Dass eine Vater-Komponente

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

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

    In Vaters Vorlage

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

    Diese Lösung funktioniert nur für einen <son></son>Instanz in der übergeordneten Vorlage. Wenn Sie mehr als eine Instanz nur in den ersten der Vorlage.

    InformationsquelleAutor der Antwort Pere Pages

  4. 1

    Der beste Weg, um den Zugriff auf eine untergeordnete Komponente ist @ViewChild.

    Lassen Sie uns sagen, Sie haben AppMainComponent mit einer verschachtelten ChildComponent von Ihrem Beispiel.

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

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

export class AppMainComponent {}

    Die Sie aufrufen möchten, eine klare Methode von Ihrem 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;
    }
}

    Können Sie erreichen es durch den Import der ChildComponent Klasse, ViewChild Dekorateur und pass-Komponente, Klasse es als eine Abfrage. Auf diese Weise würden Sie haben Zugang zu den ChildComponent Schnittstelle gespeichert in die benutzerdefinierte variable. Hier ist ein Beispiel:

    //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();
    }
}

    Hinweis! Untergeordnete Ansicht wird nur verfügbar, wenn ngAfterViewInit.

    Reagieren nach Winkel initialisiert die Komponente, die Ansichten und untergeordnete Ansichten.
    Einmal aufgerufen, nach dem ersten ngAfterContentChecked().
    Eine Komponente-nur Haken.

    Wenn Sie möchten ausführen der Methode automatisch, Sie müssen es tun, innerhalb dieses Lebenszyklus Haken.

    Kann man auch eine QueryList der untergeordneten Komponenten über ViewChildren Dekorateur.

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

...

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

    QueryList könnte sehr nützlich sein, z.B. können Sie abonnieren für Kinder ändert.

    Es ist auch möglich, erstellen Sie template Referenz-Variablen und erhalten Zugang zu Ihnen über die ViewChild Dekorateur.

    InformationsquelleAutor der Antwort Frelseren

Schreibe einen Kommentar