Der Anwendungsfall einer übergeordneten Angular-Komponente ruft eine untergeordnete Komponente auf

Dieses Mal werde ich Ihnen einen Anwendungsfall vorstellen, bei dem die übergeordnete Angular-Komponente eine untergeordnete Komponente aufruft sehen.

Komponenten verstehen

Eine Komponente ist eine spezielle Anweisung, die einfachere Konfigurationselemente verwendet, um eine komponentenbasierte Anwendungsarchitektur zu erstellen

Auf diese Weise können Sie Schreiben Sie ganz einfach Apps über ähnliche Web Component- oder Angular2-Stile.

Webkomponente ist eine Spezifikation. Es ist im Begriff, zum Standard zu werden.

Vorteile von Anwendungskomponenten:

Einfacher als gewöhnliche Befehlskonfiguration
Bietet bessere Standardeinstellungen und die beste Praxis von
ist besser für die komponentenbasierte Anwendungsarchitektur optimiert.
Das Upgrade auf Angular2 verläuft reibungsloser.
Situation ohne Konstruktion:

Für die Anweisungen, die Vorgänge in der Kompilierungs- oder Vorverknüpfungsphase ausführen müssen, kann die Komponente nicht verwendet werden weil es dieses Stadium nicht erreichen kann.
Wenn Sie Priorität, Terminal oder Multielement-Anweisungen definieren möchten, kann dies nicht verwendet werden.
Komponenten können nur durch Element-Tags ausgelöst werden, andere können nur durch Befehle ausgelöst werden.
AnsehenKinderdekorateur.

Das Template der übergeordneten Komponente und die API der untergeordneten Komponente werden im

Controller

aufgerufen. 1. Erstellen Sie eine untergeordnete Komponente „child1“, die nur eine Begrüßungsmethode für den Aufruf der übergeordneten Komponente hat.

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-child1',
 templateUrl: './child1.component.html',
 styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
 constructor() { }
 ngOnInit() {
 }
 greeting(name: string) {
 console.log("hello" + name);
 }
}

2. In der übergeordneten Komponente wird es mithilfe lokaler Vorlagenvariablen in der Vorlage und ts-Code im Controller aufgerufen.

Die übergeordnete Komponente schreibt 2

und gibt die lokalen Vorlagenvariablen

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>

<app-child>3 an. Deklarieren Sie im Controller der übergeordneten Komponente eine vom viewChild-Dekorator dekorierte Variable, um die Zitat.

Suchen Sie die entsprechende Unterkomponente über den Namen der Vorlagenvariablen child1 und weisen Sie sie der Variablen child1 zu. Sobald Sie die Referenz erhalten, können Sie die Unterkomponentenmethode aufrufen.

@ViewChild('child1')
child1:Child1Component; //父组件中获得子组件的引用
ngOnInit(){
 this.child1.greeting("Tom");
}

4. Rufen Sie die Methode der untergeordneten Komponente in der Vorlage der übergeordneten Komponente auf.

Fügen Sie der übergeordneten Komponentenvorlage eine Schaltfläche hinzu und rufen Sie beim Klicken die Begrüßungsmethode der untergeordneten Komponente child2 auf.

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>
调用child2的greeting方法

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von NodeJS Multi-Version-Management

Detaillierte Erläuterung der Verwendung von Slots/Bereich in Vue

Das obige ist der detaillierte Inhalt vonDer Anwendungsfall einer übergeordneten Angular-Komponente ruft eine untergeordnete Komponente auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!