[MUSIK]
In der vorangegangenen Übung sahen wir die Verwendung unserer ersten Strukturrichtlinie,
der NGFor.
Stellen wir uns noch ein paar Fragen zu strukturellen Richtlinien und
lernen, wie sie nützlich sind, wenn wir unsere Angular-Anwendungen schreiben.
Strukturrichtlinien sind eine Art von Richtlinien.
Direktiven ist also ein allgemeiner Dachverband, unter dem Sie Komponenten haben,
dann haben Sie strukturelle Direktiven, und dann haben Sie Attributdirektiven.
Also lasst uns ein wenig mehr über Direktiven lernen.
Was wir also erkennen, ist, dass die Angular-Vorlagen dynamisch sind, also müssen sie
im laufenden Betrieb erstellt werden, es wird eine Menge Manipulation auf dem DOM geben.
Also, was uns die Direktiven helfen, ist, uns zu ermöglichen, Anweisungen für
die Angular zu geben, wie die Vorlagen im DOM zu rendern.
Also verwenden sie Direktiven, um
Angular Anweisungen zu geben, da es die Vorlagen auf dem Bildschirm rendert.
Im Allgemeinen kann eine Direktive direkt in Angular mit
einer Klasse mit dem @Directive Dekorator definiert werden.
Wir sehen ein Beispiel für eine Richtlinie, die wir selbst
ein wenig später in diesem Kurs erstellen können.
Im Moment schauen wir uns die Baurichtlinien an.
Und vor allem
haben wir bereits auf unsere erste Art der Richtlinie gestoßen, die ein Bestandteil ist.
Eine Komponente ist eine spezielle Art von Direktive und
Angular, die eine eigene Vorlage zugeordnet ist.
Und wir haben bereits gesehen, wie wir eine Komponente nutzen können, um
Teile unseres Layouts für den Bildschirm unserer Anwendung zu definieren.
Wie ich bereits erwähnt habe, gibt es zwei andere Arten von Direktiven in Angular,
Struktur- und Attribut-Direktiven. In
dieser Lektion werden wir schnell strukturelle Direktiven untersuchen.
Und dann werden wir uns Attribut-Direktiven ein wenig später in
diesem Kurs ansehen.
Was sind also Strukturrichtlinien und wie sind sie für uns nützlich?
Was wir erkennen, wenn wir strukturelle Direktiven verwenden, sind,
sie helfen uns, das Layout unserer Inhalte zu ändern,
indem sie uns helfen, Elemente aus dem DOM hinzuzufügen und zu entfernen.
Beachten Sie insbesondere die Verwendung des Begriffs Hinzufügen und
Entfernen und Ersetzen von Elementen im DOM.
Sie verwenden also buchstäblich die strukturellen Direktiven, um
Ihr DOM Ihrer Webseite zu manipulieren.
Sie können also die strukturellen Direktiven verwenden, indem Sie sie auf ein Hostelement anwenden,
normalerweise ein div oder ein Listenelement im DOM und auch auf seine Nachkommen.
Wir haben den Benutzer,
die NGfor-Strukturrichtlinie, bereits in der vorangegangenen Übung gesehen.
Und wir sahen, wie wir mit dem NGFor eine Reihe von Gerichten durchlaufen
und dann jedes einzelne von ihnen anlegen, um das Menü für unser Restaurant zu erstellen.
Hier werde ich kurz einige der gemeinsamen Strukturrichtlinien erwähnen, denen Sie beim
Schreiben Ihrer Angular-Partition begegnen werden.
Eine der gebräuchlichsten Strukturrichtlinien, die Sie sehen werden, ist die
NGif-Richtlinie.
Wenn Sie es in Ihrer Template-Syntax verwenden, schreiben Sie es als *nGIF,
also wird diese Direktive in Ihrem DOM verwendet.
Wenn Sie zum Beispiel die nGIF-Direktive auf ein div wie
dieses in diesem Beispiel anwenden, geben Sie an, wo ist, dass,
wenn das SelectedDish nicht null ist, dieses div dem DOM hinzugefügt wird.
Wenn das SelectedDish null ist, dann
wird dieses div, was in diesem div enthalten ist, nicht zum DOM hinzugefügt, also
entfernen Sie dies buchstäblich aus dem DOM, wenn sich der Wert als falsch herausstellt.
Wenn es sich als wahr erweist, wird es in die Dump hinzugefügt.
In ähnlicher Weise sahen wir die Verwendung der NGfor-Richtlinie.
Also, wo wir definiert haben, zum Beispiel, für die md-list-item in der vorherigen
Übung sagten wir *ngfor und sagte, lassen Gericht Gerichte.
Dies ermöglicht es uns, über die Reihe von Gerichten zu iterieren
, die in unserem Typ Skript-Mantel definiert sind.
Eine weitere strukturelle Direktive, die häufig verwendet werden könnte, ist die NGSwitch-Direktive.
Obwohl ich momentan kein Beispiel habe,
werden wir später in diesem Kurs auf die Verwendung der NGSwitch-Direktive stoßen.
Dadurch können Sie selektiv bestimmte Elemente zum DOM hinzufügen,
indem Sie eine Bedingung angeben, je nachdem, was die Bedingung auswertet,
dann verwenden Sie eines dieser Elemente in der Liste.
Wenn Sie mit der switch-Anweisung von C ++ oder Java vertraut sind,
scheint Ihnen der NGSwitch sehr vertraut zu sein.
Es verhält sich also ähnlich der switch-Anweisung, die Sie
von Java oder C ++ gewohnt sind.
Lassen Sie uns mit der kurzen Diskussion über Strukturrichtlinien zur nächsten Übung übergehen, in der wir die Komponenten weiter untersuchen werden.
( MUSIK)