Lassen Sie uns darüber sprechen, wie Sie Daten im Voraus in Angular Route erhalten

Vorzeitiges Abrufen bedeutet, dass die Daten abgerufen werden, bevor sie auf dem Bildschirm angezeigt werden. In diesem Artikel erfahren Sie, wie Sie Daten abrufen, bevor Sie Änderungen weiterleiten. In diesem Artikel erfahren Sie, wie Sie resolver verwenden, resolver in Angular App anwenden und sie auf eine gängige vorinstallierte Navigation anwenden. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Warum Sie Resolver verwenden sollten

Resolver spielt die Rolle eines Middleware-Dienstes zwischen Routing und Komponenten. Angenommen, Sie haben ein Formular ohne Daten und möchten dem Benutzer ein leeres Formular präsentieren, einen loader anzeigen, während die Benutzerdaten geladen werden, und dann, wenn die Daten zurückgegeben werden, das Formular füllen und loader ausblenden.

Normalerweise erhalten wir Daten in der Hook-Funktion ngOnInit() der Komponente. Mit anderen Worten: Nachdem die Komponente geladen wurde, initiieren wir eine Datenanforderung.

Wenn wir in ngOnInit() arbeiten, müssen wir loader -Anzeige zu seiner Routing-Seite hinzufügen, nachdem jede erforderliche Komponente geladen wurde. Resolver kann das Hinzufügen und Verwenden von loader vereinfachen. Anstatt jeder Route loader hinzuzufügen, können Sie einfach einen loader für jede Route hinzufügen.

In diesem Artikel werden Beispiele verwendet, um die Wissenspunkte des resolver zu analysieren. Damit Sie es sich merken und in Ihren Projekten verwenden können.

Verwenden von Resolver in Anwendungen

Um resolver in Anwendungen verwenden zu können, müssen Sie einige Schnittstellen vorbereiten. Sie können es über JSONPlaceholder simulieren, ohne es selbst zu entwickeln.

JSONPlaceholder ist eine großartige Schnittstellenressource, mit der Sie verwandte Konzepte des Frontends besser erlernen können, ohne durch die Schnittstelle eingeschränkt zu werden.

Nachdem das Schnittstellenproblem nun gelöst ist, können wir die resolver -Anwendung starten. Ein resolver ist ein Middleware-Dienst, daher erstellen wir einen Dienst.

$ ng gs restarts/demo-resolver --skipTests=true

--skipTests=true überspringt die Generierung von Testdateien

. Ein Dienst wird im Ordner src/app/resolvers erstellt. In der resolver Schnittstelle gibt es eine Methode resolve() , die über zwei Parameter verfügt: route (eine Instanz von ActivatedRouteSnapshot ) und state (eine Instanz von RouterStateSnapshot ).

loader schreibt normalerweise alle AJAX Anfragen in ngOnInit() , aber die Logik wird im resolver statt in ngOnInit() implementiert.

Erstellen Sie als Nächstes einen Dienst, um die Listendaten im JSONPlaceholder abzurufen. Rufen Sie es dann im resolver auf und konfigurieren Sie dann resolve Auflösungsinformationen in der Route (die Seite wartet), bis resolver verarbeitet wird. Nachdem resolver verarbeitet wurde, können wir die Daten durch Routing abrufen und in der Komponente anzeigen.

Erstellen Sie den Dienst und schreiben Sie die Logik, um die Listendaten abzurufen.

$ ng gs services/posts --skipTests=true

Nachdem wir den Dienst nun erfolgreich erstellt haben, ist es an der Zeit, die Logik für eine AJAX Anfrage zu schreiben.

Der Einsatz von model kann uns helfen, Fehler zu reduzieren.

$ ng g class models/post --skipTests=true

post.ts

export class Post { id: number;
  Titel: Zeichenfolge;
  Körper: Zeichenfolge;
  Benutzer-ID: Zeichenfolge;
}

model ist fertig, es ist Zeit, die Daten des post abzurufen.

post.service.ts

import { Injectable } from „@angular/core“;
import { HttpClient } from „@angular/common/http“;
import { Post } from "../models/post";

@Injectable({
  bereitgestelltIn: „root“
})
Exportklasse PostsService {
  Konstruktor(private _http: HttpClient) {}

  getPostList() {
    let URL = „https://jsonplaceholder.typicode.com/posts“;
    return this._http.get<Post[]>(URL);
  }
}

Dieser Dienst kann nun jederzeit aufgerufen werden.

demo-resolver.service.ts

import { Injectable } from „@angular/core“;
importieren {
  Lösen,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} von „@angular/router“;
import { PostsService } from "../services/posts.service";

@Injectable({
  bereitgestelltIn: „root“
})
Die Exportklasse DemoResolverService implementiert Resolve<any> {
  Konstruktor(private _postsService: PostsService) {}

  lösen(route: ActivatedRouteSnapshot, Status: RouterStateSnapshot) {
    return this._postsService.getPostList();
  }
}

Post-Listendaten, die vom resolver zurückgegeben wurden. Jetzt benötigen Sie eine Route, um resolver zu konfigurieren, die Daten von der Route abzurufen und sie dann in der Komponente anzuzeigen. Um Routing-Sprünge durchführen zu können, müssen wir eine Komponente erstellen.

$ ng gc Components/Post-List --skipTests=true

Um die Route sichtbar zu machen, fügen Sie router-outlet in app.component.ts hinzu.

<router-outlet></router-outlet>

Jetzt können Sie die Datei app-routing.module.ts konfigurieren. Der folgende Codeausschnitt hilft Ihnen, den Routenkonfigurations- resolver zu verstehen.

app-routing-module.ts

import { NgModule } from „@angular/core“;
import { Routes, RouterModule } from „@angular/router“;
import { PostListComponent } from "./components/post-list/post-list.component";
import { DemoResolverService } aus "./resolvers/demo-resolver.service";

const Routen: Routen = [
  {
    Pfad: „Beiträge“,
    Komponente: PostListComponent,
    lösen: {
      Beiträge: DemoResolverService
    }
  },
  {
    Weg: "",
    RedirectTo: „Beiträge“,
    pathMatch: „voll“
  }
];

@NgModule({
  Importe: [RouterModule.forRoot(routes)],
  Exporte: [RouterModule]
})
export class AppRoutingModule {}

Der Routing-Konfiguration wurde eine resolve hinzugefügt, die eine HTTP Anfrage initiiert und dann die Initialisierung der Komponente ermöglicht, wenn HTTP Anfrage erfolgreich zurückgegeben wird. Die Route stellt die von HTTP Anfrage zurückgegebenen Daten zusammen.

Um dem Benutzer mithilfe einer vorinstallierten Navigation

anzuzeigen, dass eine Anfrage ausgeführt wird, schreiben wir einen öffentlichen und einfachen loader in AppComponent . Sie können es nach Bedarf anpassen.

app.component.html

<div class="loader" *ngIf="isLoader">
  <div>Laden...</div>
</div>
<router-outlet></router-outlet>

app.component.ts

import { Component } from „@angular/core“;
importieren {
  Router,
  RouterEvent,
  NavigationStart,
  NavigationEnde
} von „@angular/router“;

@Komponente({
  Selektor: „app-root“,
  templateUrl: „./app.component.html“,
  styleUrls: ["./app.component.scss"]
})
Exportklasse AppComponent {
  isLoader: boolean;

  Konstruktor(private _router: Router) {}

  ngOnInit() {
    this.routerEvents();
  }

  routerEvents() {
    this._router.events.subscribe((event: RouterEvent) => {
      switch (wahr) {
        case-Ereignisinstanz von NavigationStart: {
          this.isLoader = true;
          brechen;
        }
        case-Ereignisinstanz von NavigationEnd: {
          this.isLoader = false;
          brechen;
        }
      }
    });
  }
}

Wenn die Navigation startet, wird isLoader -Wert true zugewiesen und Sie werden den folgenden Effekt auf der Seite sehen.

Wenn resolver die Verarbeitung abgeschlossen hat, wird er ausgeblendet.

Jetzt ist es an der Zeit, den Wert aus der Route abzurufen und anzuzeigen.

port-list.component.ts

import { Component, OnInit } from „@angular/core“;
import { Router, ActivatedRoute } from „@angular/router“;
importiere { Post } aus „src/app/models/post“;

@Komponente({
  Selektor: „app-post-list“,
  templateUrl: „./post-list.component.html“,
  styleUrls: ["./post-list.component.scss"]
})
Die Exportklasse PostListComponent implementiert OnInit {
  Beiträge: Post[];

  Konstruktor(private _route: ActivatedRoute) {
    this.posts = [];
  }

  ngOnInit() {
    this.posts = this._route.snapshot.data["posts"];
  }
}

Wie oben gezeigt, stammt der Wert von post aus den Snapshot- data von ActivatedRoute . Beide Werte können erhalten werden, solange Sie in der Route dieselben Informationen konfigurieren.

Wir rendern wie folgt in HTML .

<div class="post-list grid-container">
  <div class="card" *ngFor="let post of posts">
    <div class="title"><b>{{post?.title}}</b></div>
    <div class="body">{{post.body}}</div>
  </div>
</div>

CSS Fragmentstile lassen es schöner aussehen.

port-list.component.css

.grid-container {
  Anzeige: Raster;
  Rastervorlagenspalten: calc(100% / 3) calc(100% / 3) calc(100% / 3);
}
.card {
  Rand: 10px;
  Kastenschatten: Schwarz 0 0 2px 0px;
  Polsterung: 10px;
}

Es wird empfohlen, den SCSS-Präprozessor zum Schreiben von Stilen zu verwenden.

Nachdem die Daten von der Route abgerufen wurden, werden sie in HTML angezeigt. Der Effekt ist wie folgt: Schnappschuss.

An diesem Punkt haben Sie gelernt, wie Sie resolver in Ihrem Projekt verwenden.

Zusammenfassung

In Kombination mit User Experience Design und mithilfe von resolver können Sie die Leistung Ihrer Anwendung verbessern. Um mehr zu erfahren, können Sie die offizielle Website besuchen.

Bei diesem Artikel handelt es sich um eine kostenlose Übersetzung mit persönlichem Verständnis und hinzugefügten Kommentaren. Die ursprüngliche Adresse lautet:

https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route