Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten

Überblick

Angular-Komponentenkommunikation

Komponentenbaum, Nummer 1 ist die Stammkomponente AppComponent.

Komponenten sind lose gekoppelt und je weniger sie voneinander wissen, desto besser.

Durch Klicken auf die Schaltfläche in Komponente 4 wird die Initialisierungslogik von Komponente 5 ausgelöst.

Traditioneller Ansatz: Rufen Sie die Methode der Komponente 5 im Klickereignis der Schaltfläche 4 auf. Enge Kopplung.

Angular: Implementiert, ohne dass Komponente 4 überhaupt weiß, dass Komponente 5 existiert.

Verwenden Sie eine lose Kopplung zur Datenübertragung zwischen Komponenten, um hochgradig wiederverwendbare Komponenten zu entwickeln.

Verwenden Sie Eingabe- und Ausgabeeigenschaften, um Daten zwischen Komponenten in einer Eltern-Kind-Beziehung zu übergeben.

1. Übersicht über Ein- und Ausgabeeigenschaften

Komponenten werden als Black-Box-Modelle entworfen und verwenden Eingabeeigenschaften, um zu deklarieren, was sie von der Außenwelt empfangen. Es ist nicht nötig zu wissen, woher diese Dinge kommen.

Eine Komponente muss nur wissen, was zu tun ist, wenn die Außenwelt ihr das liefert, was sie benötigt.

Komponenten senden Ereignisse über Ausgabeeigenschaften aus, um der Außenwelt etwas mitzuteilen, das von Interesse sein könnte. Es ist nicht erforderlich zu wissen, an welche Komponente das Ereignis ausgegeben wird.

Jeder Interessierte kann die von der Komponente ausgegebenen Ereignisse abonnieren.

2. Eingabeattribute

Die Unterkomponente definiert zwei Eingabeeigenschaften, die mit dem Dekorator @Input() dekoriert werden.

@Eingang()
  Lagercode: Zeichenfolge;
  @Eingang()
  Betrag:Zahl;

Die übergeordnete Komponente bindet das Bestandsattribut an das StockCode-Attribut der untergeordneten Komponente, indem sie das Attribut an das Eingabeattribut der untergeordneten Komponente bindet.

<div>
  Ich bin die übergeordnete Komponente</div>
<div>
  <input type="text" [(ngModel)]="stock" placeholder="Bitte geben Sie den Lagercode ein">
  <app-order [Lagercode]=Lager [Betrag]="100"></app-order>
</div>

3. Die Eigenschaftsbindung erfolgt unidirektional, von der übergeordneten Komponente zur untergeordneten Komponente

Setzt den Wert des StockCodes der Unterkomponente alle 3 Sekunden auf Apple zurück.

Exportklasse OrderComponent implementiert OnInit {

  @Eingang()
  Lagercode: Zeichenfolge;
  @Eingang()
  Betrag:Zahl;

  Konstruktor() { 
    setzeIntervall(()=>{
      this.stockCode = "Apple"
    },3000)
  }

  ngOnInit() {
  }
}

Wenn sich der Wert des StockCodes der untergeordneten Komponente in „Apple“ ändert, ändert sich der Wert des StockCodes der übergeordneten Komponente nicht. Dies bedeutet, dass die Bindung unidirektional ist. Nur die übergeordnete Komponente kann die untergeordnete Komponente ändern, und Änderungen an den Eigenschaften der untergeordneten Komponente wirken sich nicht auf die übergeordnete Komponente aus.

4. Ausgabeeigenschaften

Angular-Komponenten können EventEmitter-Objekte verwenden, um benutzerdefinierte Ereignisse auszugeben, die von anderen Komponenten verarbeitet werden können. EventEmitter ist eine Unterklasse der Subject-Klasse in Rxjs. In der responsiven Programmierung kann es sowohl als Beobachter als auch als Beobachter verwendet werden. Das heißt, das EventEmitter-Objekt kann über seine Emit-Methode benutzerdefinierte Ereignisse ausgeben und über die Subscribe-Methode auch den von EventEmitter ausgegebenen Ereignisstrom abonnieren.

Wie verwende ich EventEmit, um Ereignisse innerhalb einer Komponente auszugeben?

Beispielszenario: Angebotskomponente

Angenommen, Sie benötigen eine Komponente, die eine Verbindung zu einer Börse herstellen und die sich ändernden Aktienkurse in Echtzeit anzeigen kann. Um diese Komponente in verschiedenen Finanzanwendungen wiederverwendbar zu machen, sollte die Komponente neben der Anzeige der Aktienkurse in Echtzeit auch die neuesten Aktienkurse an die Außenwelt senden, damit andere Komponenten die entsprechende Geschäftslogik basierend auf den sich ändernden Aktienkursen ausführen können.

Hinweis: Es empfiehlt sich, bestimmte Datenstrukturen explizit mithilfe von Klassen oder Schnittstellen zu definieren.

1. Simulieren Sie zunächst eine Echtzeitänderung des IBM-Aktienkurses

Exportklasse PriceQuoteComponent implementiert OnInit {

  //Keine Verbindung zum Aktiendienst herstellen, einen Zufallszahlengenerator verwenden, um die Aktienkursänderungen zu simulieren und den Aktiencode und den neuesten Preis anzuzeigen stockCode:string="IBM";
  Preis:Zahl;

  Konstruktor() {
    setzeIntervall(()=>{
      Lassen Sie priceQuote:PriceQuote = neues PriceQuote(this.stockCode,100*Math.random());
      dieser.Preis=Preisangebot.letzterPreis;
    },1000)
  }

  ngOnInit() {
  }

}


//Kapseln Sie ein Kursobjekt, um Informationen zum Aktienkurs zu kapseln //Es ist eine gute Angewohnheit, bestimmte Datenstrukturen mit Klassen oder Schnittstellen klar zu definieren export class PriceQuote {
  Konstruktor(public stockCode: string, //Lagercode public lastPrice: number //aktueller Preis) {
  }
}

2. Geben Sie die Informationen aus und teilen Sie der Außenwelt mit, wer an einem Abonnement interessiert ist

Der Typ hinter EventEmit ist der Datentyp im ausgegebenen Ereignis.

importiere { Komponente, OnInit, EventEmitter, Ausgabe } von '@angular/core';

@Komponente({
  Selektor: ‚App-Preisangebot‘,
  Vorlagen-URL: "./Preisangebot.Komponente.html",
  styleUrls: ['./price-quote.component.css']
})
Exportklasse PriceQuoteComponent implementiert OnInit {

  //Keine Verbindung zum Aktiendienst herstellen, einen Zufallszahlengenerator verwenden, um die Aktienkursänderungen zu simulieren und den Aktiencode und den neuesten Kurs anzuzeigen stockCode: string = "IBM";
  Preis: Anzahl;

  @Output() //Das Emissionsereignis muss als Ausgabe geschrieben werden
  //EventEmitter erfordert einen generischen letzten Preis: EventEmitter<PriceQuote> = new EventEmitter();
  //

  Konstruktor() {
    setzeIntervall(() => {
      Lassen Sie priceQuote: PriceQuote = neues PriceQuote(this.stockCode, 100 * Math.random());
      dieser.Preis = Preisangebot.letzterPreis;
      //Verwenden Sie lastPrice, um einen Wert auszugeben this.lastPrice.emit(priceQuote);
    }, 1000)
  }

  ngOnInit() {
  }

}
//Kapseln Sie ein Kursobjekt, um Informationen zum Aktienkurs zu kapseln //Es ist eine gute Angewohnheit, bestimmte Datenstrukturen mit Klassen oder Schnittstellen klar zu definieren export class PriceQuote {
  Konstruktor(public stockCode: string, //Lagercode public lastPrice: number //aktueller Preis) {
  }
}

3. Angebotsinformationen erhalten und in der übergeordneten Komponente anzeigen

Die Vorlage der übergeordneten Komponente erfasst und verarbeitet dieses Ereignis durch Ereignisbindung.

exportiere Klasse AppComponent {
  Bestand = "";
  Preisangebot: Preisangebot = neues Preisangebot("", 0);

  //Der Ereignistyp ist der Datentyp, der ausgegeben wird, wenn die untergeordnete Komponente Folgendes ausgibt: //Die übergeordnete Komponente kann priceQuoteHandler(event:PriceQuote){ abrufen.
    this.priceQuote=Ereignis;
  }
}

Schablone

<!--Standardmäßig ist der Ereignisname der Name des Ausgabeattributs-->
<app-price-quote (letzterPreis)="priceQuoteHandler($event)"></app-price-quote>

<div>
  Dies liegt außerhalb der Zitatkomponente<br/>
  Der Aktiencode ist {{priceQuote.stockCode}},
  Der Aktienkurs beträgt {{priceQuote.lastPrice | number:"2.0-2"}}
</div>

Standardmäßig ist der Ereignisname der Name des Ausgabeattributs. Sie können den Ereignisnamen ändern, indem Sie

@Output("priceChange") // Zum Starten des Ereignisses ist eine Ausgabe erforderlich
  //EventEmitter erfordert einen generischen letzten Preis: EventEmitter<PriceQuote> = new EventEmitter();

Die Vorlage wird auch geändert in

<app-price-quote (Preisänderung)="PreisangebotsHandler($Event)"></app-price-quote>

Zusammenfassen

Ereignisse werden über Ausgabeeigenschaften ausgegeben und Daten über Ereignisse übertragen. Sie werden über die Ereignisbindung in der Vorlage der übergeordneten Komponente erfasst und verarbeitet.

Wenn zwischen zwei Komponenten keine Eltern-Kind-Beziehung besteht, wie können Daten auf lose gekoppelte Weise übergeben werden? Zu diesem Zeitpunkt muss der Mittelsmannmodus verwendet werden.

Oben finden Sie eine ausführliche Erläuterung der Kommunikation zwischen Angular-Eltern-Kind-Komponenten. Weitere Informationen zur Kommunikation zwischen Angular-Eltern-Kind-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!