Get best of the week

10 nützliche Angular-Funktionen, die Sie verpasst haben


Wenn Sie regelmäßig Anwendungen in Angular schreiben und mehr als hundert Stunden damit verbracht haben, kennen Sie diese Funktionen höchstwahrscheinlich. Aber um sicher zu gehen - lesen Sie :)

Bevor wir zu den Funktionen von Angular übergehen, sollten wir ein sehr nützliches Werkzeug erwähnen. Bit (Github) macht es einfach, gemeinsam an Angular-Komponenten zu arbeiten und diese gemeinsam zu nutzen. Ich empfehle es aufrichtig, eine konsistente Benutzeroberfläche beizubehalten, die Entwicklung zu beschleunigen und die Anzahl der Fehler im Code zu minimieren.


Beispiel: Kreislader für Angular mit bit.dev


1. Titel


Das Titel-Tag ist ein HTML-Element, das den Titel einer Webseite definiert. Überschriften werden auf der Suchergebnisseite (SERP) als anklickbarer Titel für das Ergebnis angezeigt. Sie sind sehr wichtig für Benutzerfreundlichkeit, SEO und soziale Werbung. Netzwerke.

Winkelanwendungen übernehmen den Titel aus dem Tag ... in index.html. Standardmäßig ändert der Übergang zwischen Komponenten in Angular diesen Header nicht.

Wussten Sie, dass ein Titel für jede Komponente separat festgelegt werden kann?

Angular hat einen Titeldienst ineckig/ Plattform-Browser. Sie können es einfach in andere Komponenten einbetten und den Titel mit der setTitle-Methode überschreiben.

import { Title } from "@angular/platform-browser"@Component({
   ...
})
export class LoginComponent implements OnInit {
   constructor(private title: Title) {}    ngOnInit() {
       title.setTitle("Login")
   }
}

Wenn Sie in der Anwendung zur LoginComponent navigieren, ändert sich der Titel des Browserfensters in "Login".

Dasselbe kann in jeder Komponente durchgeführt werden. Wenn Sie in der Anwendung navigieren, ändert sich der Titel entsprechend und reagiert auf Benutzeraktionen.

2. Meta


Angular Application Meta Tags werden auch aus der Datei index.html übernommen. Und um sie aus Komponenten zu setzen, der Meta-Service auseckig/ Plattform-Browser.

Und wieder: Die Verwendung von Meta-Tags ist nützlich für SEO und Seitenwerbung in sozialen Netzwerken. In Netzwerken enthalten sie Informationen zu einer Webseite, die Suchmaschinen verwenden, um die Suchergebnisse korrekt zu bewerten und korrekt anzuzeigen.

Importieren Sie Meta aus, um die Meta-Tag-Komponente zu verwendeneckig/ Plattform-Browser und in die gewünschte Komponente einbetten.

import { Meta } from "@angular/platform-browser"@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta) {}    ngOnInit() {
        meta.updateTag({name: "title", content: ""})
        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
        meta.updateTag({name: "site", content: "My Site"})
    }
}

BlogComponent kann jetzt korrekt auf Twitter, Facebook usw. angezeigt werden. Gleichzeitig werden Beschreibungen, Überschriften und Bilder in der richtigen, lesbaren Form angezeigt.
Hast du auch davon gehört? Dann ist hier etwas interessanteres.

3. Überschreiben der Musterinterpolation


Der Standardinterpolator in Mustern ist {{}}. Wenn Sie eine Variable zwischen {{und}} eingeben, wird ihr Wert im endgültigen DOM angezeigt.

Wissen Sie, dass es möglich ist, die Standard-Kapselungsbegrenzer für beliebige Zeichen zu überschreiben? Das ist einfach. Sie müssen nur neue Werte in der Interpolationseigenschaft im Komponentendekorator angeben.

@Component({
   interpolation: ["((","))"]
})
export class AppComponent {}

Die in der AppComponent-Vorlage verwendete Interpolation wurde in (()) geändert und {{}} funktioniert nicht mehr.

@Component({
   template: `
       <div>
           ((data))
       </div>
   `,
   interpolation: ["((","))"]
})
export class AppComponent {
   data: any = "dataVar"
}

Im Browser sehen Sie, dass anstelle von ((Daten)) die Zeichenfolge "dataVar" angezeigt wird.

4. Ort


Über den Standortdienst können wir die aktuelle URL der im Browser geöffneten Seite abrufen. Abhängig davon, welche LocationStrategy verwendet wird, wird Location entweder über den Pfad in der URL (/ example / page /) oder über den Teil der URL nach dem Pfund (# test / page /) gespeichert.

Mit Location können wir zur URL gehen, in der Story vorwärts gehen, zurückgehen, die aktuelle URL ändern oder das oberste Element in der Story ersetzen.

Der Ortungsdienst von CommonModule hilft hier.

import { Location } from "@angular/common"@Component({
   ...
})
export class AppComponent {
   constructor(private location: Location) {}    navigateTo(url) {
       this.location.go(url)
   }    goBack() {
       location.back()
   }    goForward() {
       location.forward()
   }
}


5. Dokument


Manchmal müssen Sie ein Dokumentmodell abrufen, um DOM-Vorgänge direkt aus einer Angular-Anwendung ausführen zu können.

DOKUMENT dient nur diesem Zweck. DOKUMENT ist ein DI-Token, das den Hauptrenderkontext darstellt. In einem Browser ist dies ein DOM-Dokument. Es bietet DOM-Operationen unabhängig von der Laufzeit.

Hinweis: Das Dokument ist möglicherweise nicht im Anwendungskontext verfügbar, wenn die Anwendungs- und Renderkontexte nicht übereinstimmen (z. B. beim Starten der Anwendung in Web Worker).

Nehmen wir an, wir haben eine Art HTML-Element:

<canvas id="canvas"></canvas>


Implementieren Sie DOCUMENT: Um ein Canvas-HTMLElement zu erhalten:

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}
}


Holen Sie sich die HTMLElement-Zeichenfläche mit getElementById ()

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}    renderCanvas() {
       this._doc.getElementById("canvas")
   }
}


Warnung: DOKUMENT vorsichtig verwenden! Die Interaktion mit dem DOM ist direkt gefährlich und erhöht das XSS-Risiko.

6. Dekorateur @Attribute


Grundsätzlich verwenden sie in einer Angular-Anwendung die Komponenten-, Modul- und Direktiven-Dekoratoren.

Es gibt jedoch auch einen Attributdekorator, mit dem Sie eine statische Zeichenfolge ohne unnötigen Leistungsaufwand übergeben und die Änderungsprüfung umgehen können.

Attributdekoratorwerte werden nur einmal überprüft. Wird wie ein Dekorateur verwendetEingang::

@Component({
   ...
})
export class BlogComponent {
   constructor(@Attribute("type") private type: string ) {}
}


7. HttpInterceptor


HttpInterceptor ist eine sehr leistungsstarke Funktion in Angular, mit der Sie HttpRequest-Anforderungen abfangen und verarbeiten können.

Die meisten Interceptors konvertieren die ausgehende Anforderung, bevor sie sie durch Aufrufen von next.handle (transformierterReq) an den nächsten Interceptor in der Kette übergeben.

In seltenen Fällen können Interceptors die Anforderung vollständig selbst verarbeiten und den Rest der Kette nicht weiter delegieren. Dieses Verhalten ist zulässig.

Der HttpInterceptor wird am häufigsten verwendet in:

  • Authentifizierung
  • Caching
  • Gefälschtes Backend
  • URL-Transformation
  • Header-Subversion

Um diesen Interceptor zu verwenden, müssen Sie einen Dienst erstellen und die HttpInterceptor-Schnittstelle implementieren.

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
   constructor() {}    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       ...
   }
}

Fügen Sie es in das Hauptmodul ein:
@NgModule({
   ...
   providers: [
       {
           provide: HTTP_INTERCEPTORS,
           useClass: MockBackendInterceptor,
           multi: true
       }
   ]
   ...
})
export class AppModule {}


8. AppInitializer


Manchmal ist es beim Starten einer Angular-Anwendung erforderlich, einen bestimmten Code zu initialisieren. Laden Sie beispielsweise Einstellungen, laden Sie den Cache, laden Sie Konfigurationen oder führen Sie Überprüfungen durch. Das AppInitialzer-Token wird speziell dafür erstellt.
APP_INITIALIZER: Funktion wird sofort nach dem Start der Anwendung ausgeführt.
Angenommen, wir müssen beim Starten einer Angular-Anwendung einige runSettings-Funktionen ausführen:

function runSettingsOnInit() {
   ...
}

Wechseln Sie dazu zum Hauptmodul von AppModule und fügen Sie es dem Abschnitt NgModule Decorator-Anbieter hinzu:

@NgModule({
   providers: [
       { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
   ]
})

9. Bootstrap Listener


In Analogie zu AppInitialzer verfügt Angular über eine Funktion, mit der Sie das Laden einer Komponente verfolgen können. Dies ist APP_BOOTSTRAP_LISTENER.

Alle von diesem Token zurückgegebenen Rückrufe werden für jede herunterladbare Komponente aufgerufen.

Mit dieser Funktion können Sie in vielen Fällen den Start von Komponenten verfolgen. Das Router-Modul verwendet es beispielsweise, um Komponenten basierend auf der Routennavigation zu zerstören und zu erstellen.

Um APP_BOOTSTRAP_LISTENER zu verwenden, müssen Sie es mit einer Rückruffunktion zum Abschnitt "Anbieter" im AppModule hinzufügen:

@NgModule({
   {
       provide: APP_BOOTSTRAP_LISTENER, multi: true,
       useExisting: runOnBootstrap
   }
   ...
})
export class AppModule {}


10. NgPlural


Pluralisierung bereitet Programmierern Kopfschmerzen. Die Aufgabe der grammatikalischen Anpassung von Wortformen in Abhängigkeit von der Verwendung des Singulars / Plural entsteht ständig. Einige Websites verwenden hierfür einfach die Endung (en). Zum Beispiel:

1 component(s) removed
3 component(s) removed

Das heißt, der Leser selbst muss verstehen, welche Zahl impliziert ist :)

Angular schlägt vor, dieses Problem mithilfe der NgPlural-Direktive zivilisierter zu lösen.

NgPlural fügt DOM-Unterzweige basierend auf einem numerischen Wert hinzu oder entfernt sie. Für die Pluralisierung benötigen Sie Folgendes.

Um diese Anweisung zu verwenden, müssen Sie das Attribut [ngPlural] als Schalterausdruck auf den Elementcontainer setzen. Interne Elemente mit dem Attribut [ngPluralCase] ​​werden abhängig von den angegebenen Bedingungen angezeigt:

<p [ngPlural]="components">
   <ng-template ngPluralCase="=1">1 component removed</ng-template>   
   <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>   
</p>


Jetzt können Sie "(s)" wegwerfen. Die NgPlural-Direktive hilft dabei, abhängig von der Bedeutung die richtige Wortform abzuleiten. Gesamt:

// if 1 component
1 component removed

// if 5 components
5 components removed


Source: https://habr.com/ru/post/undefined/

More articles:


All Articles