Müheloses Umschalten von Themes in eigenständigen Angular-Apps mit PrimeNG-js-Tutorial-php.cn

Müheloses Umschalten von Themes in eigenständigen Angular-Apps mit PrimeNG

王林

Freigeben： 2024-07-17 11:26:48

Original

828 Leute haben es durchsucht

Theme toggle PrimeNG

Als ich mich für meine aktuelle Angular 17-Standalone-App mit SSR mit PrimeNG und PrimeFlex befasste, stach ein Aspekt wirklich hervor: integrierte Themes. Im Gegensatz zu Material UI bietet PrimeNG eine wunderbare Auswahl vorgefertigter Themen, die Sie einfach in Ihrer Anwendung konfigurieren können.

Aber das echte Sahnehäubchen? Das Einrichten eines Theme-Switchers, mit dem Benutzer ihr Erlebnis personalisieren können, ist mit nur wenigen Codezeilen ein Kinderspiel. Lasst uns eintauchen!

Vorbereiten Ihrer App für Themen:

Installation: Beginnen Sie mit der Installation von PrimeNG mit npm oder Yarn.

npm install primeng --save

Stile in angle.json einschließen:

Stellen Sie sicher, dass Ihre angle.json-Datei die erforderlichen Stile enthält. Unten ist meine Ordnerstruktur und ihre Einbindung in angle.json.

Folder Structure

In jedem Stylesheet habe ich integrierte PrimeNG-Designs aus Ressourcen importiert.

 //angular.json 
 "styles": [
              "src/styles.css",
              {
                "input": "src/app/styles/lara-dark-teal.scss",
                "bundleName": "lara-dark-teal",
                "inject": false
              },
              {
                "input": "src/app/styles/lara-light-teal.scss",
                "bundleName": "lara-light-teal",
                "inject": false
              }
            ],

Nach dem Login kopieren

Diese Konfiguration garantiert, dass die Stylesheets während der Erstellungszeit in Ihrem endgültigen dist-Ordner gebündelt werden.

Standardthema festlegen (index.html):

Stylesheet einschließen: Integrieren Sie in Ihre index.html-Datei das Stylesheet für Ihr ausgewähltes Standardthema und weisen Sie ihm eine ID für den Dienstzugriff zu:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Theme Switcher</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link id="app-theme" rel="stylesheet" type="text/css" href="lara-light-teal.css">

  <link rel="stylesheet" href="https://unpkg.com/primeflex@latest/primeflex.css">
</head>

<body class="">
  <app-root></app-root>
</body>
</html>

Nach dem Login kopieren

Dynamischer Themenwechsel mit einem Dienst:

Erstellen Sie einen Theme-Service: Erstellen Sie einen Service zum Verwalten von Theme-Änderungen. Fügen Sie es in Ihre Stammkomponente ein, um eine anwendungsweite Zugänglichkeit zu gewährleisten:

//themes.service.ts
import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
    providedIn: 'root',
})
export class ThemeService {

    constructor(@Inject(DOCUMENT) private document: Document) {}

    switchTheme(theme: string) {

        let themeLink = this.document.getElementById('app-theme') as HTMLLinkElement;

        if (themeLink) {
            themeLink.href = theme + '.css';
        }
    }
}

Nach dem Login kopieren

Nutzung des Dienstes innerhalb der Komponente:

Dienst und Dokument einfügen: Fügen Sie in Ihre Komponente den ThemeService und das Document-Objekt ein:

  constructor(private themeService: ThemeService) {

  }
  checked: boolean = false;

  changeTheme() {
    let theme = (this.checked) ? "lara-dark-teal" : "lara-light-teal"
    this.themeService.switchTheme(theme);

  }

}

Nach dem Login kopieren

Vorlage mit p-toggle: Nutzen Sie die p-toggle-Komponente von PrimeNG, um die Umschalttaste zu rendern. Binden Sie seinen Status an eine boolesche Variable (aktiviert) und lösen Sie beim Klicken die Methode changeTheme() aus. Verwenden Sie Pi-Symbole (PrimeNG-Symbole) für eine visuelle Attraktivität.

<p-toolbar styleClass="bg-primary shadow-2  opacity-80">

    <div class="flex-grow">
        My Theme Switcher
    </div>
    <p-toggleButton styleClass="bg-primary shadow-2 text-white" [(ngModel)]="checked" onIcon="pi pi-sun"
        offIcon="pi pi-moon" (click)="changeTheme()" />

</p-toolbar>

Nach dem Login kopieren

Trennung von Belangen: Der Service konzentriert sich auf die Themenverwaltung und sorgt dafür, dass Ihre Komponente sauber und fokussiert bleibt.

Verbesserte Lesbarkeit:Der Code ist gut strukturiert und für Entwickler aller Niveaus leicht verständlich.

Entwicklerfreude: PrimeNG optimiert den Prozess und ermöglicht Ihnen die Gestaltung eines nahtlosen Theme-Wechselerlebnisses in Ihrer Angular 17-Anwendung.

Das obige ist der detaillierte Inhalt vonMüheloses Umschalten von Themes in eigenständigen Angular-Apps mit PrimeNG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!