So erstellen Sie eine ganzseitige Website in Angular

Seite 4 von 4: Seite 4

12. Fügen Sie eine benutzerdefinierte Direktive hinzu

Und jetzt zum lustigen Teil! Unsere Website ist größtenteils funktionsfähig, mit der Ausnahme, dass sich unser Hintergrundbild nicht auf die gesamte Fläche des Browsers ausdehnt. Wir werden dieses Problem lösen, indem wir eine benutzerdefinierte Direktive erstellen, die die Größe unseres Bildes so ändert, dass es die volle Seitenhöhe und -breite erreicht.

Die CLI ist wieder in gutem Zustand, da wir damit eine Direktive generieren können. Wir werden eine generieren volle Seite Richtlinie in der App / Shared / Direktiven Verzeichnis.



mkdir src/app/shared/directives ng g directive shared/directives/fullpage

Dadurch wird eine grundlegende Anweisung generiert, die so aussieht.



imac vs macbook pro für die Videobearbeitung
ts import { Directive } from '@angular/core'; @Directive({ selector: '[appFullpage]' }) export class FullpageDirective { constructor() { } }

Der generierte Selektor ist appFullpage , was sich für mich seltsam anfühlt, also habe ich es in umbenannt volle Seite . Sie können es so oder so tun.

Der grundlegende Unterschied zwischen einer Komponente und einer Direktive besteht darin, dass eine Direktive keine eigene Vorlage hat. Es ist für die Dekoration oder Erweiterung eines vorhandenen Elements verantwortlich. In diesem Fall möchten wir, dass ein vorhandenes Element in das Fenster passt.



13. Greifen Sie auf das Element zu

Um die Größe eines Elements zu ändern, benötigen wir einen Verweis darauf, der bequem von bereitgestellt wird ElementRef . Dies gibt uns Zugang zu dem Element, für das unsere Richtlinie deklariert wurde.

@Directive({ selector: '[fullpage]' }) export class FullpageDirective { constructor(private element: ElementRef) { } }

Langweiliger Mathe-Alarm! Wir werden eine erstellen Größe ändern Funktion, die die Breite und Höhe unseres Elements sowie die Breite und Höhe des Fensters misst und dann die Größe des Elements entsprechend proportional ändert. Die Grundidee besteht darin, die Breite oder Höhe an das Fenster anzupassen, basierend darauf, welches kleiner ist, und dann die andere Eigenschaft proportional zu skalieren.

// app/shared/directives/fullpage.directive.ts ... export class FullpageDirective { constructor(private element: ElementRef) { } resize() { let bgwidth = this.element.nativeElement.width; let bgheight = this.element.nativeElement.height; let winwidth = window.innerWidth; let winheight = window.innerHeight; let widthratio = winwidth / bgwidth; let heightratio = winheight / bgheight; let widthdiff = heightratio * bgwidth; let heightdiff = widthratio * bgheight; if (heightdiff > winheight) { this.element.nativeElement.width = winwidth; this.element.nativeElement.height = heightdiff; } else { this.element.nativeElement.width = widthdiff; this.element.nativeElement.height = winheight; } } }

14. Stellen Sie die Host-Listener vor

Das ist alles faszinierend, aber woher wissen wir, wann wir die Größe unseres Elements ändern müssen? Abgesehen vom Winkel möchten wir die Größe unseres Elements beim ersten Laden und bei jeder Größenänderung des Fensters ändern.



Die nächste Frage lautet: Woher wissen wir, wann diese Ereignisse eintreten? Angular bietet eine großartige Möglichkeit, dies in Form von 'HostListener' zu tun. Wir können eine Methode mit dekorieren HostListener Metadaten, die das Ereignis definieren, auf das wir warten möchten, um die gerade dekorierte Methode auszulösen.

Wir gebrauchen Fenster: Größe ändern zu wissen, wann die Fenstergröße geändert wurde und Belastung um zu wissen, wann das Element geladen wurde.

// app/shared/directives/fullpage.directive.ts import { Directive, ElementRef, HostListener } from '@angular/core'; ... export class FullpageDirective { constructor(private element: ElementRef) { } @HostListener('window:resize', ['$event']) onResize(event) { this.resize(); } @HostListener('load', ['$event']) onLoad(event) { this.resize(); } resize() { ... } }

Dies ist eine großartige Möglichkeit, Methoden an DOM-Ereignisse anzuhängen, ohne direkt mit dem DOM sprechen zu müssen, unsere Listener manuell zu schreiben und vor allem, ohne sich um die Zerstörung unserer Ereignisse sorgen zu müssen.

MacBook Pro 13 Zoll wasserdichte Hülle

Um unsere Richtlinie zu unserer Bewerbung hinzuzufügen, gehen wir zu unserer page.component.html Datei und fügen Sie die volle Seite Attribut zu unserem Bild.

...

15. Machen Sie die Dinge mit CSS hübsch

Es gibt nur ein paar Dinge, die wir mit dem CSS tun, damit dies hübsch aussieht. Zum Beispiel definieren wir, dass wir Flexbox für unser Layout verwenden und dass wir unsere wollen Körper Tag, um einen Überlauf auszublenden.

/* styles.css */ html, body, app-root { width: 100%; height: 100%; display: flex; flex-direction: column; } body { overflow: hidden; margin:0; }

Beachten Sie auch, dass wir eine erstellen Abstandshalter Klasse, um das Logo und die Schaltflächen in der Symbolleiste auseinander zu drücken. Wir haben auch eine aktiv Klasse, mit der wir zielen routerLinkActive .

/* app/app.component.css */ md-toolbar { position: relative; z-index: 1; overflow-x: auto; } md-toolbar-row { justify-content:space-between; } .spacer { flex: 1 1 auto; } a.active { background-color: rgba(0,0,0, 0.3); } h1 { margin: 0; } h1 .light { font-weight: 100; }

Zum Schluss setzen wir mit :Gastgeber Pseudo-Selektor für die Komponente, auf die unser CSS abzielt.

/* app/page/page.component.css */ :host { display: flex; height: 100%; align-items: center; } md-card { width:500px; background: rgba(255,255,255,0.9); } md-card-header { color: #3f51b5; } md-card-content { padding: 8px; } .fullBg { z-index:0; position: fixed; top: 0; left: 0; }

Das Interessante am CSS ist, dass es auf der entsprechenden Komponentenebene definiert ist. Anwendungsweite Stile gehen in der Regel in die styles.css Datei, wobei jeder komponentenspezifische Stil in die entsprechenden CSS-Dateien aufgenommen wird.

16. Überprüfen Sie Ihre Arbeit

Wir haben im ersten Teil dieser Serie einiges behandelt, aber nehmen wir uns eine Minute Zeit, um zu überprüfen, was wir erreicht haben:

  • Wir haben das benutzt @ eckig / cli ein neues Projekt für uns zu generieren
  • Wir haben installiert @ eckig / material und @ eckig / animationen über NPM
  • Wir fügten hinzu @ eckig / material und @ eckig / animationen zu unserem Winkelmodul
  • Wir haben eine erstellt PageComponent um die Seiten auf unserer Website darzustellen
  • Wir haben eine erstellt ContentService den Inhalt für unsere Website zu halten
  • Wir haben Routen erstellt, die den Seiten unserer Website zugeordnet und benutzerdefiniert übergeben wurden Daten um herauszufinden, auf welcher Seite wir uns befinden
  • Wir haben eine Symbolleiste hinzugefügt, die mit jeder Seite verknüpft ist routerLink und gestaltete die Schaltfläche für die aktive Seite mit routerLinkActive
  • Wir haben eine erstellt volle Seite Richtlinie zur Größenänderung des Bildes in unserer PageComponent um den gesamten Hintergrund zu füllen
  • Wir verwendeten HostListener um auf DOM-Ereignisse zu warten und zu wissen, wann die Größe des Elements geändert werden muss

Zum Thema passende Artikel:

  • 1
  • zwei
  • 3
  • 4

Aktuelle Seite: Seite 4

Vorherige Seite Seite 3