[MUSIK]
Wenn Sie eine statische Website haben,
dann haben Sie alle Daten, die Sie benötigen, um Ihre Website zu erstellen.
Und es wird einmal erstellt und Ihre Website ist einsatzbereit.
Aber viele Websites werden heutzutage von Daten aus dem Backend gesteuert.
Ihre Webanwendung ruft Daten von einem Backend-Server ab und
verwendet dann die Daten, um Inhalte auf Ihrer Website dynamisch zu gestalten oder
sogar Inhalte auf Ihrer Website zu aktualisieren.
Dies erfordert also, dass die Daten vom Backend durch
Ihre Webanwendung zum DOM fließen.
Und jede Benutzerinteraktion auf dem DOM sollte zurück an Ihre Webanwendung übertragen werden.
Dies erfordert
beispielsweise die Kommunikation zwischen dem DOM und Ihrer Komponente im eckigen Framework.
Schauen wir uns an, wie dies innerhalb des eckigen Rahmens geschieht und
mit ein wenig mehr Details.
Was wir bisher gelernt haben, ist, wie eine Komponente vorbereitet wird.
So haben wir gesehen, dass die Komponente zwei Hauptteile hat, die
Typoskriptdatei, in der die Architektur der Komponente definiert ist, und die Eigenschaften.
Und die Methoden von und dann haben Sie die Vorlage, die
definiert, wie der Inhalt angelegt und in das DOM hinzugefügt wird.
Die Vorlage ist also diejenige, die von einer Komponente geliefert wird, um
einen Teil Ihrer Webseite zu besetzen.
Die Vorlage bildet also das Kommunikationsmedium zu Ihrem DOM.
Und diese Vorlage erfordert, dass Daten von Ihrer Komponente abgerufen werden,
um Teile des Inhalts in Ihrer Vorlage und
entsprechend innerhalb des DOM Ihrer Webseite zu rendern.
Wenn Sie nun nicht den Luxus eines Frameworks wie Angular hatten,
müssen Sie sich mit den gesamten Details darüber beschäftigen, wie
die Daten von der Anwendungssite zum DOM fließen.
Und wie die Benutzerinteraktionsereignisse,
die im DOM verursacht werden, an Ihre Anwendung zurückgesendet werden.
Glücklicherweise
unterstützen sie mit Frame funktioniert wie Angular, all diese Verhaltensweisen von Natur aus.
Jetzt haben wir bereits eine Verwendung des Datenflusses von einer
Komponenteneigenschaft zur Vorlage in den vorherigen Übungen gesehen.
Wo wir die doppelten geschweiften Klammern verwendet haben, um Informationen, die
aus einer Variablen im TypeScript-Code Ihrer Komponente stammen, an Ihre Vorlage zu liefern.
Wir werden uns andere Wege ansehen, und
dann auch in der folgenden Übung werden wir dies nutzen,
um die Winkelanwendung zu modifizieren, die wir bisher entwickelt haben.
Was wir bisher gesprochen haben, ist die Datenbindung,
ein Mechanismus, um den Informationsfluss zwischen der Vorlage und der
Komponente oder zwischen dem DOM und der Komponente zu koordinieren.
Auf der Komponentenebene handelt es sich um eine Art Eigenschaft oder
eine Methode, die entweder der Vorlage übergeben oder vom DOM aufgerufen werden muss.
Oder auf der Vorlagenseite können einige Informationen sein,
die von der Vorlage benötigt werden, um in das DOM oder
sogar aus dem DOM gerendert zu werden, das erfasst und an Ihre Komponente zurückgesendet wird.
All dies erfordert also Daten, die von der Komponente zur
Vorlage oder von Ereignissen fließen, die aus dem DOM gesammelt
werden oder an Ihre Komponente zurückgesendet werden, damit sie auf diese Ereignisse reagieren kann.
Jetzt kann dies leicht im Winkelrahmen mit vier verschiedenen
Arten von Informationsfluss behandelt werden, die wir in der nächsten Folie zusammenfassen werden.
Zurück zur Interaktion zwischen Komponente und Vorlage
haben wir bereits die erste Art der Interaktion zwischen der Komponente und
der Vorlage gesehen, bei der der Wert einer Eigenschaft in die Vorlage fließt.
So sahen wir die Verwendung des Gerichtennamens,
der Beschreibung des Gerichts, der Beschreibung der Gerichte und so
weiter, die geliefert wurden, um Informationen in Ihrer Vorlage zu rendern. In
diesem Fall haben wir die doppelten Klammern verwendet, um die Tatsache einzuschließen, dass
ein Wert aus Ihrer Komponente in Ihrer Vorlage verwendet wird.
Eine andere Art von Informationsfluss, den Sie sehen werden, ist, wo
Sie eine Art von Eigenschaft angeben, die mit einem Tag in eckigen Klammern verknüpft ist.
Weisen Sie es dann als Wert aus einer der Eigenschaften in Ihrer Komponente zu.
Diese Art von Ansatz werden wir in der Übung sehen, die
unmittelbar nach diesem Vortrag folgt.
Also hier würden wir etwas in eckigen Klammern angeben.
Also achten Sie auf
ein Beispiel dafür in der Übung, wo ich mehr darüber diskutieren werde.
Wenn Sie ein Ereignis in der Nähe von DOM generiert haben
, kann dieses Ereignis zum Aufruf eines Handlers oder
einer Methode in Ihrer Komponente führen, die sich um die Behandlung dieses Ereignisses kümmert.
Daher werden die Methoden, die von
den Ereignissen aus Ihrem DOM aufgerufen werden, als Handler bezeichnet.
Also, das Handle ist nichts anderes als, wie ich sagte, eine Methode, die auch
in einigen Parametern innerhalb der Handlermethoden dort übergeben werden könnte.
Später, wenn wir uns Formulare ansehen, werden wir eine bidirektionale Datenbindung sehen.
Also alle drei, die wir bisher gesehen haben, der Fluss des Wertes von
der Komponente zur Vorlage oder die Eigenschaft, die einem Wert zugewiesen wird, oder
das Ereignis, das einem Handler zugewiesen wird, um das Ereignis zu behandeln.
All dies sind, was wir als Einweg-Datenbindungen bezeichnen, weil
sie nur in eine Richtung fließen.
Sie können auch einen bidirektionalen Fluss haben, wo Sie ihn auch
in der Syntax sehen können, was Sie mit eckigen Klammern angeben würden.
Und dann darin mit Standardklammer eingeschlossen.
Ein Inneres dort werden Sie etwas wie ein ngModel spezifizieren.
Sie werden die Verwendung dieser sehen, wenn es später im nächsten Modul gebildet wird.
Hier werden Sie also eine Eigenschaft zuweisen.
In diesem Fall ist der Informationsfluss bidirektional.
Jede Änderung in Ihrem DOM wird also wieder in Ihre Eigenschaft und
die Komponente reflektiert.
Jede Änderung in der Eigenschaft der Komponente wird auf das DOM zurückgespiegelt.
Beachten Sie die spezifische Syntax, die wir für
die Angabe des ngModel in diesem Beispiel hier verwenden.
Wir verwenden eine eckige Klammer und innen, dass wir die Standardklammer dort verwenden.
Lassen Sie mich nun zusammenfassen, was wir gerade über
die Datenbindung in der vorherigen Folie in dieser Tabelle gelernt haben.
In dieser Tabelle zeigen wir die verschiedenen Möglichkeiten, wie Datenbindung verwendet wird.
Einseitige Datenbindung von der Datenquelle an das Ansichtsziel
, also
verwenden wir von der Komponente zum DOM einen doppelten geschweiften Ausdruck darin.
Dies ist, was wir als Interpolation als Beispiel für die,
wäre der Name des Gerichts, eingeschlossen innerhalb der doppelten Klammern, wie wir gesehen haben,
in den Übungen verwendet, im vorherigen Modul.
Dann haben wir, die zweite Art, wo Sie das Ziel
in eine eckige Klammer einschließen und es dann einem Ausdruck auf der rechten Seite zuweisen.
Diese Ausdrücke können JavaScript-Ausdrücke mit einigen Einschränkungen sein.
Die Beispiele, die wir normalerweise sehen werden, wären
die Verwendung einer Eigenschaft aus einer der Klassen dort.
Also, das ist, was wir als Eigenschaft Attribut bezeichnet, und
Beispiel, von dem Sie in der Übung sehen, die dieser Vorlesung folgt.
Wo Sie die Verwendung einer Schale sehen würden, die in einer eckigen Klammer eingeschlossen ist und mit einem
SelectedDish gleichgesetzt wird, was eine Variable ist, die innerhalb einer Komponente deklariert ist.
Dies kann auch mit einem Bind-Target ausgedrückt werden,
eine Möglichkeit, dasselbe auszudrücken.
Also beide diese, ob Sie ein Ziel in eckige Klammern oder bind-target einschließen.
So können Sie zum Beispiel Bind-Dish sehen.
Wie auch immer Sie dies ausdrücken, beziehen sich beide auf dasselbe.
Das angegebene Eigenschaftenattribut oder der angegebene Klassenstil.
Nun wird der unidirektionale Informationsfluss vom Viewziel zur
Datenquelle normalerweise mit dem Ziel ausgedrückt, das
hier in Klammern eingeschlossen ist oder auch als on-target ausgedrückt werden kann.
Und auf der rechten Seite wäre eine Aussage.
Eine Anweisung könnte eine Art eines JavaScript-Ausdrucks
sein, der normalerweise in der des Aufrufs einer Methode innerhalb einer Komponente liegt.
Nun, Sie werden ein Beispiel in der Übung sehen, die folgt, wo
Sie in die Klammer geklickt und onSelect zugewiesen hätten.
Welches ist eine Methode, die innerhalb einer
Komponentenklasse dort mit einer Parameterschale beschrieben wird, die dieser Methode dort geliefert wird.
Die bidirektionale Datenbindung, wie wir sahen, wäre mit Squire und Klammern,
Squire Klammern und Klammern, die mit einem Ausdruck gleichgesetzt wird.
Wir werden eine bidirektionale Datenbindung als einen Satz mit Formularen ein wenig später sehen, wo
Sie etwas wie ein ngModel verwenden werden, das in den eckigen
Klammern und Klammern eingeschlossen ist, gleichgesetzt mit etwas wie dish.name.
Das verbindet das Formularelement mit einer Eigenschaft
eines JavaScript-Objekts, in unserer Komponente.
Sie können dies auch als Bindon-Ziel ausdrücken.
Das ist eine andere Art, dasselbe zu sagen.
Nun, diese bidirektionale Datenbindung, die wir tun
, wird manchmal als Banane in einer Box bezeichnet.
Wenn Sie also die eckigen Klammern mit der Klammer darin betrachten,
sieht es wie eine Banane in einer Box aus.
Möglicherweise wird dies in einigen der Dokumentation oder
in einigen Blogs verwendet, die Sie möglicherweise im Internet lesen.
Die verbindlichen Ziele, die wir gesehen haben, erweitern weiter
die verbindlichen Ziele, sind die Eigenschaften, die auf der linken Seite
der verbindlichen Erklärung dieser datenbindenden Erklärung deklariert werden.
Typischerweise in eckigen Klammern oder in Klammern oder beides eingeschlossen.
Die rechte Seite des Bindungsausdrucks
sind also ihre Bindungsquellen, die typischerweise wie die Eigenschaften eines JavaScript-Objekts oder
einer Variablen oder eines Ausdrucks sind, den wir auf der rechten Seite definieren.
Wenn Sie Zieleigenschaften definieren, die mit der Selektive einer Komponente verknüpft sind.
Dies ist eine Möglichkeit, entweder Informationen in eine Komponente zu übergeben
oder Informationen von einer Komponente an eine andere Komponente zurückzusenden.
Dies erleichtert die Kommunikation zwischen den Komponenten.
Sie würden also die Verwendung eines Dekorators wie @Input sehen, der mit
einer Möglichkeit verbunden ist, Informationen von einer Komponente zu einer anderen Komponente zu senden.
Wir werden ein Beispiel für diese Verwendung in der Übung sehen
, die dieser Vorlesung folgt.
In ähnlicher Weise können Sie den Output Dekorator verwenden, um ein Ereignis
von einer Komponente anzugeben, die an eine andere Komponente zurückgegeben wird.
Beide Verwendungen werden also effektiv für die Kommunikation zwischen Komponenten verwendet.
( MUSIK)