Detaillierte Erklärung des Middleman-Modus von Angular-Komponenten

1. Mittelsmann-Modell

Mit Ausnahme von Komponente 1 hat jede Komponente in diesem Komponentenbaum eine übergeordnete Komponente, die die Rolle eines Vermittlers spielen kann. Der Vermittler der obersten Ebene ist Komponente 1, die es den Komponenten 2, 3 und 6 ermöglicht, miteinander zu kommunizieren. Analog dazu ist Komponente 2 der Vermittler zwischen Komponente 4 und Komponente 5. Komponente 3 ist der Vermittler zwischen den Komponenten 7 und 8.

Ein Mittelsmann ist dafür verantwortlich, Daten von einer Komponente zu empfangen und an eine andere weiterzuleiten.

2. Beispiele

Nehmen wir als Beispiel die Aktienkurskomponente an und nehmen wir an, ein Händler überwacht den Preis der Kurskomponente. Wenn der Aktienkurs einen bestimmten Wert erreicht, klickt der Händler auf eine Schaltfläche zum Kaufen, um die Aktie zu kaufen. Problem: Die Kurskomponente weiß nicht, wie man eine Order zum Kauf einer Aktie platziert, sie wird nur zur Überwachung des Aktienkurses verwendet. Daher sollte die Quotierungskomponente ihren Mittelsmann (also die APP-Komponente) zu diesem Zeitpunkt benachrichtigen und ihm mitteilen, dass der Händler eine bestimmte Aktie zu einem bestimmten Preis kaufen möchte. Der Mittelsmann sollte wissen, welche Komponente die Bestellung abschließen kann, und den Lagercode sowie den aktuellen Preis an diese Komponente weitergeben.

1. Fügen Sie der Angebotskomponente einen Kaufen-Button hinzu

Fügen Sie der Kurskomponente eine Schaltfläche hinzu. Wenn die Aktie einen bestimmten Preis erreicht, kann der Händler auf die Schaltfläche klicken, um die Aktie zu diesem Preis zu kaufen.

<div>
  Ich bin ein Zitatbestandteil</div>
<div>
  Der Aktiencode ist {{stockCode}} und der Aktienkurs ist {{price | number:"2.0-2"}}
</div>
<div>
  <input type="button" value="Jetzt kaufen" (click)="$($event)">
</div>

@Ausgabe()
  kaufen:EventEmitter<Preisangebot>=neuer EventEmitter();

  Aktie kaufen(Ereignis){
    dies.kaufen.ausgeben(neues Preisangebot(dieser.Aktiencode,dieser.Preis));
  }

2. Übergeordnete Komponente empfängt und verarbeitet Ereignisse

Hören Sie auf das Kaufereignis in der übergeordneten Komponente und erhalten Sie die aktuellen Kaufinformationen

<app-price-quote (kaufen)="buyHandler($event)" ></app-price-quote>

  KaufHandler(Ereignis:Preisangebot){
    this.priceQuote=Ereignis;
  }

Die Angebotsinformationen können durch Attributbindung an die Bestellkomponente übergeben werden.

<app-order [Preisangebot]="Preisangebot"></app-order>

3. Bestellkomponente

Die Bestellkomponente verfügt über eine Eingabeeigenschaft, um das Angebot zu empfangen und auf der Seite anzuzeigen.

  @Eingang()
  Preisangebot:Preisangebot;

<div>
  Ich gebe eine Komponentenbestellung auf</div>
<div>
  Kaufen Sie 100 Lots {{priceQuote.stockCode}}-Aktien zu {{priceQuote.lastPrice | number:"2.2-2"}}
</div>

4. Operationsergebnisse

Der Preis der Angebotskomponente ändert sich ständig. Wenn Sie auf „Jetzt kaufen“ klicken, wird die aktuelle Aktie zum aktuellen Preis gekauft. Dieser wird jedes Mal aktualisiert, wenn Sie auf die Schaltfläche klicken.

Vorteile: In der Angebotskomponente gibt es keinen Code, der sich auf die Bestellkomponente bezieht, und die Angebotskomponente weiß nicht einmal von der Existenz der Bestellkomponente. Die Kurskomponente gibt lediglich das Börsenkürzel und den Aktienkurs zum Kaufzeitpunkt aus. Ebenso findet sich im Bestellteil nichts, was mit dem Angebotsteil zusammenhängt. Die Angebotskomponente und die Auftragskomponente arbeiten zusammen, um die Funktion der Platzierung von Lageraufträgen zu erfüllen, ohne dass sie einander kennen. Hohe Wiederverwendung von Komponenten.

3. Einen Dienst als Vermittler nutzen

Wenn zwei Komponenten keine gemeinsame übergeordnete Komponente haben und nicht einmal zusammen angezeigt werden, wie können sie dann kommunizieren? Beispielsweise die Bauteile 4 und 6 in der Abbildung am Anfang des Artikels.

In diesem Fall sollte ein Injektionsdienst als Vermittler genutzt werden. Immer wenn eine Komponente erstellt wird, wird der Middleman-Dienst eingefügt. Komponenten können den von einem Dienst ausgegebenen Ereignisstrom abonnieren.

Bevor Sie eine Anwendung mit Angular entwickeln, sollten Sie gründlich überlegen und entwerfen, welche wiederverwendbaren Komponenten Sie schreiben möchten, z. B. Bestellkomponenten, Angebotskomponenten und welche Komponenten und Dienste als Vermittler für welche Komponenten fungieren. Was sind die Eingänge der Komponenten, was sind die Ausgänge und wie kommunizieren die Komponenten miteinander? Beginnen Sie dann mit dem Schreiben des Codes.

Oben finden Sie eine ausführliche Erläuterung des Middleman-Modus von Angular-Komponenten. Weitere Informationen zu Angular-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!