Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Angular 2 Grundkurs

ngSwitch

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit der ngSwitch-Direktive lassen sich wertabhängige Knoten im DOM hinzufügen oder entfernen.
05:49

Transkript

In den kommenden Minuten möchte ich euch sehr gerne demonstrieren, wie ihr in der Lage seid, Switch-Anweisungen innerhalb des dom-Umfeldes zu realisieren. Um das Ganze möglich z machen, werden wir eine strukturelle Direktive verwenden. Die strukturelle Direktive heißt NgSwitch. Und zu NgSwitch gibt es noch die Direktiven NgSwitchWhen und -Default, die uns dann ermöglichen, dann eine Switch-Anweisung im dom-Bereich zu realisieren. Was ist mein Ziel? Mein Ziel ist eigentlich relativ einfach. Wie ihr erkennen könnt, habe ich hier ein kleines Beispiel vorbereitet, in dem ich zunächst einmal etwas aufgehübscht habe. Das Aufhübschen ist relativ einfach gehalten. Ich habe hier das Logo implementiert. - das ist eine ganz normale SVG-Grafik - und zusätzlich habe ich hier in dem Bereich noch zu den jeweiligen User-Elementen Icons hinzugefügt. Die Icons habe ich hinzugefügt, in der Form, dass ich Material-Design-Icons eingebunden habe. Die Material-Design-Icons haben den Vorteil, dass ich einfach im Klartext schreiben kann, welches Icon ich hier gerne darstellen möchte. Hierfür habe ich natürlich auch noch ein Style defineirt. Das heißt, in dem Moment, wo ich den "i"-Tag verwende, wie wir ihn hier sehen, möchte ich dann entsprechend "Material Icons" als Font verwenden und kann dann wunderbar die Icon-Font nutzen, und dementsprechend hier die Uhr, den Schraubenschlüssel, die URD, das Buch und Co darstellen. Der nächste Schritt soll jetzt der sein, dass ich natürlich die jeweiligen Icons nur dann anzeige, wenn es dann zu dem jeweiligen Benutzer passt. Und hier schauen wir uns einmal nochmal ganz kurz die Userdaten an. Dann sehen wir, dass beispielsweise der Bayram die Rolle eines PMs hat, der Kadir ist ein Developer, der Stefan ist ebenfalls Developer, der Tim ist ein Auszubildender, also "Education", der Robert ist ein Designer, und der Florian und ich wir sind im Grunde genommen "Dev/CEO", also Hausmann für alles quasi. Und dementsprechend möchte ich sehr gerne halt einfach unterschiedliche Icons zeigen, je nachdem was passiert. Um genau zu sein, möchte ich bei "Dev/CEO" - das soll das Standardicon sein - den Ruderer zeigen. Wenn "PM" ist möchte ich an dieser Stelle einfach die Uhr zeigen. Der Developer soll der Schraubenschlüssel sein und so weiter und so weiter. Wie realisiere ich das Ganze nun? Ich realisiere das in der Form, dass ich einfach hier innerhalb der "user.component" nun zunächst einmal die NgSwitch-Direktive verwende. Die NgSwitch-Direktive erwartet von mir, eine Eigenschaft, die gebunden werden soll. Und die Eigenschaft, zu der ich binde, ist "user.pos" Und user.pos ist ja genau das, was wir uns vor zwei Sekunden noch angeguckt haben. Ist nämlich genau der Positionswert. das heißt, über "user.pos" habe ich jetzt wunderbar die Möglichkeit, jetzt eine Switch-Anweisung durchzulaufen. Und wie mache ich das? Ich verwende hierfür eine strukturelle Direktive, und zwar gibt es zunächst einmal die strukturelle Direktive NgSwitchDefault. So. Die erwartet auch keinen Wert. Das heißt, NgSwitchDefault wird immer dann angezeigt, wenn die NgSwitch-Direktive hier oben mit source.position eine Zuordnung hat, die nicht aufgelöst werden kann in den folgenden Knoten, die wir jetzt gleich nochmal zusätzlich definieren, über die strukturelle Direktive NgSwitchCase. Großartig. Und was für ein Case soll es sein? Schaut mal, der Schedule, also die Uhr sollte ja nur dann erscheinen, wenn es der PM ist, also kann ich das hier einfach mal kopieren, und schreibe jetzt hier mal PM als Zeichenkette rein. Das bedeutet, NgSwitch, die Direktive sorgt dafür, dass alles, was intern als Kontent zu diesem html-Knoten existiert, dann überprüft wird, und zwar überprüft in der Form, dass nach der strukturellen Direktive NgSwitchCase und -Default gesucht wird. Und wenn dann entsprechend ein NgSwitchCase dem Wert entspricht, der hier als Position übergeben wird, wir dann auch das Icon angezeigt. Das Ganze werde ich jetzt nochmal ganz fix zwei-, dreimal zusätzlich hinzufügen. Und zwar einmal als "Dev" Und zwar einmal als "Dev" Speichere ich das Ganze nun, könnt ihr wunderbar erkennen, dass bei mir jetzt als Dev CEO der Default-Fall greift, das heißt, ich sehe den Ruderer. Der Bayram ist PM, deswegen greift hier bei ihm "schedule". Kadir und Stefan sind Entwickler, deswegen greift hier "Dev". Der Tim ist Auszubildender, deswegen greift "Edu", und ganz unten der Ruby, da seht ihr dann entsprechend, dass das Dashboard greift, weil dann entsprechend hier "Des" entsprechend als Wert für positon ist. Was man sehr schön erkennen kann, ist wenn ich jetzt hier einfach mal in den Inspektor gehe. das Angular selber dann halt wirklich folgendermaßen vorgeht. Jedes dieser Templates, die hier verwendet werden für die strukturelle Direktive, sind hier aufgeführt. Allerdings sind die auskommentiert, die nicht gegriffen haben und der, der gegriffen hat, der ist dann entsprechend nicht auskommentiert und aktiv. Und je nachdem, wo ich dann gucke, sehe ich dann auch unterschiedliche Bereiche. Hier in dem Sample seht ihr beispielsweise, dass "schedule" aktiv ist, wogegen die anderen Elemente alle NgSwitch-konform dann auch auskommentiert sind. Und auf die Art und Weise kann ich wirklich hervorragend auch Switch-Anweisungen innerhalb der html-Welt realisieren.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!