Angular. Ferdinand Malcher
<button class="ui red button"
(click)="showBookList()">
Zurück zur Buchliste
</button>
</div>
Listing 6–49 Template der BookDetails-Component (book-details.component.html)
Der <ng-container>
Wenn wir eine Direktive wie ngFor nutzen, so binden wir diese an ein Element im Template. Mit ngFor wird das Element dann so oft vervielfältigt, wie Items in dem Array existieren – auch wenn wir eigentlich kein DOM-Element für diese Inhalte benötigen. Auch mit ngIf haben wir diese Situation: Wir wollen eigentlich nur Teile des Templates zu einem logischen Block zusammenfassen und müssen dafür unnötige DOM-Elemente einfügen.
Um diese Unschönheit zu lösen, stellt Angular ein passendes Hilfsmittel bereit: den <ng-container>. Dieses Element erzeugt kein DOM-Element, sondern wird direkt durch seinen Inhalt ersetzt. Der Container wird hauptsächlich verwendet, um darauf eine Direktive wie ngFor oder ngIf anzuwenden.
<span *ngFor="let item of ['a', 'b', 'c']">
{{ item }},
</span>
<!-- Resultat: -->
<!-- <span>a,</span><span>b,</span><span>c,</span> -->
<ng-container *ngFor="let item of ['a', 'b', 'c']">
{{ item }},
</ng-container>
<!-- Resultat: -->
<!-- a, b, c, -->
Die Implementierung ist damit vollständig: Wir können nun zwischen den beiden Komponenten unserer Anwendung hin- und herwechseln. Klicken wir ein Buch in der Listenansicht an, werden wir zur Detailansicht geleitet. Von dort aus gelangen wir mit einem Klick auf den Button wieder zurück zur Buchliste.
Code Review
Die Lösung ist nicht optimal.
In diesem Kapitel haben wir im BookMonkey zwei wechselbare Ansichten implementiert. Dazu haben wir zwei Komponenten angelegt, von denen jeweils nur eine angezeigt wird. Die Kommunikation zwischen den beiden Komponenten haben wir mit Events organisiert. Zugegeben, dieser Weg ist sehr umständlich und nicht gut in der Praxis einsetzbar. Das Prinzip hat noch ein paar Schwächen:
keine URLs für Seiten, beim Neuladen wird immer die Buchliste angezeigt
keine Navigation im Browser mit Vor/Zurück
für mehrere Komponenten sehr aufwendig
tiefere Verschachtelung von Komponenten sehr kompliziert
nicht modular, weil Komponenten intern voneinander abhängen
keine echten Links, sondern nur click-Events, dadurch keine Navigation mit der Tastatur möglich
Im Einzelfall mag diese Lösung einsetzbar sein, sie ist für mehr als zwei Komponenten aber viel zu umständlich. Es muss eine robustere Lösung her. Ab Seite 147 widmen wir uns deshalb ausführlich dem Prinzip des Routings, mit dem wir diese Probleme gezielt angehen können.
Abb. 6–11 Detailansicht
Was haben wir gelernt?
Mit Event Bindings können Ereignisse auf DOM-Elementen abgefangen werden.
Es wird die Syntax mit runden Klammern verwendet: <element (event)="handler($event)"></element>.
Es gibt native Events, die durch Benutzeraktionen oder Statusänderungen ausgelöst werden, z. B. click oder mouseover.
Ist eine Komponente an ein Element gebunden, können Ereignisse aus der Komponente heraus getriggert werden.
Dazu werden in der Komponente ein EventEmitter und der Decorator @Output() eingesetzt.
Mit Event Bindings können wir Daten im Komponentenbaum nach oben übermitteln.
Demo und Quelltext: https://ng-buch.de/bm4-it1-evt
7Powertipp: Styleguide
Verschiedene Entwickler bringen oft verschiedene Stile in ein Projekt. Dabei geht es häufig um syntaktische Fragen (»Einrücken mit Leerzeichen oder Tab?«), aber auch zu Softwarestruktur und Codestil muss man Einigungen finden. Bei der Arbeit mit einem Framework wie Angular kommen außerdem die plattformspezifischen Eigenschaften hinzu.
Offizielle Empfehlung zum Codestil
Um den Einstieg zu vereinfachen, bringt Angular eine offizielle Empfehlung zum Stil mit: den Styleguide.1 In diesem Dokument sind Hinweise und Regeln zusammengefasst, die sich als Best Practice erwiesen haben. Alle Empfehlungen sind begründet, sodass der Leser sich mit den Argumenten auseinandersetzen kann.
Wir arbeiten in diesem Buch nach den Empfehlungen des Styleguides. Viele Hinweise, vor allem zur Benennung von Klassen und Dateien, verfolgt die Angular CLI schon automatisch für uns. Der Styleguide ist ein wertvolles Mittel, um bei der Arbeit mit Angular eine klare stilistische Linie zu verfolgen.
Codelyzer
In diesem Zusammenhang ist das Projekt Codelyzer interessant.2 Codelyzer führt eine syntaktische und semantische Prüfung des Codes durch, die sich nach dem Styleguide richtet. Das Tool wird automatisch von der Angular CLI installiert und integriert sich nahtlos mit TSLint. Ist also das Plug-in für TSLint im Editor aktiviert, wird geprüft, ob der Code den Richtlinien des Styleguides entspricht. Visual Studio Code zeigt mit passenden Markierungen an, wenn eine Regel nicht eingehalten wurde.
Abb. 7–1 TSLint mit Codelyzer zeigt an, wenn die Regeln aus dem Styleguide verletzt werden.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам