Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Angular 2 Grundkurs

Styling

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Jede Komponente besitzt Style-Definitionen. In diesem Video lernen Sie die unterschiedlichen Möglichkeiten der Einbindung kennen.
05:43

Transkript

Natürlich sind wir auch in der Lage, Komponenten mit Styles zu versehen. Wie das Ganze funktioniert, möchte ich euch gerne in diesem Video zeigen. Nun beginnen wir damit, dass wir uns den Komponenten-Decorator mal anschauen. Hier finden wir unter dem "selector" und dem "templateUrls" die Information, mit welchem Knoten und welchem Inhalt dann eine Komponente dargestellt werden soll. Um Styles zu definieren gibt es auch Eigenschaften. Wenn ich hier die Code Completion verwende, könnt ihr sehen, dass es einmal die Eigenschaft "styles" gibt, was ein Array von Strings ist, und es gibt "styleUrls", was ebenfalls ein Array von Strings ist. Das heißt ich bin mittels "styles" in der Lage, jetzt hier ein Array zu erzeugen und in diesem Array ist es nun so, dass ich ohne Probleme ganz normal css ablegen kann. Ich verwende dafür ein back-tick, um mehrzeilige Strings zu erzeugen. Und öffne mal parallel noch an dieser Stelle Komponenten.html. Da sehen wir es. Hier gibt es ein "nav"-Knoten, "main"-Knoten, "footer"-Knoten. Und da werde ich jetzt mal zwei, drei Styles für definieren. Ich beginne damit, dass ich sage, der "nav"-Knoten selber der soll einfach mit einer Farbe arbeiten. Der "main"-Knoten soll eine Hintergrundfarbe haben. Und der "footer", der soll etwas kleiner sein. Speicher das Ganze mal und dann seht ihr das hier wunderbar, wie das Ganze funktioniert. Und jetzt könnt ihr hier wunderbar erkennen, der footer hat eine etwas kleinere Schrift, Ich habe eine Hintergrundfarbe gesetzt und ich habe hier auch eine Schriftfarbe gesetzt. Das Ganze ist ja an dieser Stelle als Array definiert. Also theoretisch wäre ich jetzt auch in der Lage, quasi einzelne Inhalte in Array-Elemente zu packen. Wenn ihr mich fragt, ist das komplett überflüssig, denn ich glaube die Daseinsberechtigung für das Array ist hauptsächlich dann gegeben, wenn wir darüber nachdenken, dass es später möglich sein soll ja auch unterschiedliche URLs zu definieren, denn wir sind ganz ohne Probleme natürlich auch in der Lage, jetzt hinzugehen und diese Style-Eigenschaften innerhalb einer css abzulegen. Ich klaue mir jetzt einfach mal hier die Tempalte-Datei, nur weil ich schreibfaul bin. Ich will jetzt einfach eine css machen und werde jetzt den Inhalt der css-Styles hier rauskopieren, in meine css-Datei packen. Wunderbar. Und nun bin ich innerhalb der Komponente in der Lage, statt der Styles-Eigenschaft hier die Eigenschaft "styleUrls" zu verwenden. Und diese StyleUrls-Eigenschaft erwartet wieder ein Array. Aber diesmal erwartet es Pfade zu einer css-Datei. Den Pfad klaue ich mir jetzt hier und ändere die Endung statt "html" auf "css". Und nun werden wir dann sehen, dass nach einem Browser-Reload wunderbar die css-Datei geladen worden ist. Um euch zu beweisen, dass es wirklich die externe ist, werde ich hier noch fix zwei Änderungen machen. Ich sorge dafür, dass in der Navigation die Schrift kleiner wird und ein padding und ein margin möchte ich jetzt ebenfalls hinzufügen. Eigentlich nur um euch zu symbolisieren, dass es wirklich jetzt die externe Datei ist. So. Wunderbar. Ich speichere das Ganze nochmal, und das ist der Beweis. dass wir jetzt die externe Datei geladen haben. Erlaubt mir auch nochmal ein Blick in den Inspektor. Und da werdet ihr etwas sehr spannendes feststellen, nämlich, dass die Komponente, die ich hier angelegt habe, nun mit der Vorlage befüllt wurde, aber ihr seht etwas ganz besonderes. Diese Komponente hat auf einmal jetzt jedem Element eine eindeutige Style-ID übergeben. Diese Style-ID übergibt es standardmäßig. Und in diesem Fall macht es das aus folgendem Grund. Es versucht einen shadow dom zu simulieren. Dieser shadow dom hat ja die Eigenart, dass es euch ermöglicht, Webkomponenten so zu bauen, dass sie komplett losgelöst sind von der Außenwelt. Das bedeutet auch, dass die css die ihr definiert, in sich geschlossen sein muss. Das bedeutet, sie darf äußere Elemente nicht beeinflussen und darf natürlich idealerweise auch noch so arbeiten, dass es von außen definierte css ignoriert. Wie kriege ich das denn hin? Ganz einfach. Ich gebe einfach jedem html-Element hier ein eindeutiges Attribut. Und dann muss ich ja nur noch auf Folgendes achten. Und das machen wir jetzt, indem wir im Kopfbereich der html mal schauen, was nämlich mit meiner css passiert ist. Die wurde hier in meinen Style-Knoten hinzugefügt und jedes Mal das Attribut vollautomatisch, ohne dass ich mich darum kümmern musste auch hinzugefügt. Das heißt, Angular 2.0 kümmert sich vollständig um uns. Simuliert einen shadow dom und damit ein in sich geschlossenes System, so dass die css, die ich jetzt hier definiere, hundertprozentig nur innerhalb dieses Komponentenkontextes funktioniert. Und ich muss mir darum dann entsprechend keine Gedanken machen, dass es Wechselwirkungen gibt. In diesem Video habt ihr gelernt, wie ihr in der Lage seid, ohne weitere Probleme, Styles einer Komponente zuzuordnen.

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!