logo

Angular Basics:Abrufen von Daten aus Fragmenten und Abfrageparametern

In diesem Beitrag werden wir untersuchen, wie Sie Daten aus URL-Abfrageparametern in Angular innerhalb der Komponente mithilfe des Router-Moduls abrufen können.

Bevor wir anfangen

Dieser Beitrag ist für alle Ebenen von Frontend-Entwicklern geeignet, die Angular verwenden, daher wird nicht vorausgesetzt, dass Sie mit Anfängerkonzepten und Installationsprozessen vertraut sind. Hier sind einige Voraussetzungen, die Sie erfüllen sollten, um die Demonstration dieses Artikels zu durchlaufen:

  • Eine integrierte Entwicklungsumgebung wie VS Code
  • Knotenversion 11.0 auf Ihrem Computer installiert
  • Node Package Manager Version 6.7 (wird normalerweise mit der Node-Installation geliefert)
  • Angular CLI Version 8.0 oder höher
  • Eine aktuelle Version von Angular (dieser Beitrag verwendet Angular 12)

Weitere nette Extras sind:

  • Grundkenntnisse des Angular-Frameworks auf Anfängerniveau

Weitere Routing-Konzepte

Im letzten Beitrag haben wir uns die Abfrageparameter angesehen und verstanden, wie URLs wie die untenstehende mit dem Angular Router erstellt werden.

https://www.google.com/search?q=query+params+angular&oq=query+params+angular

Was wir bauen

Heute werden wir an einer Navbar-Komponente mit den About- und Contact-Komponenten arbeiten und die Abfrageparameter verwenden und dann die Details in einer der Komponenten abrufen. Wir werden mit dem letzten Beitrag fortfahren, also laden Sie die Quelldatei von hier auf Ihren Computer herunter.

Öffnen Sie die neue Datei in VS Code und führen Sie im Terminal den folgenden Befehl aus:

npm install

Dadurch wird sichergestellt, dass alle für das Projekt erforderlichen Node-Module und Abhängigkeiten ordnungsgemäß installiert werden. Die App-Datei „component.html“ sollte wie folgt aussehen:

<div class="container">
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/about']">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/contact']">Contact</a>
  </li>
</ul>
<router-outlet></router-outlet>
</div>

Parameter definieren

Fügen Sie nun Parameter hinzu, die wir später in diesem Beitrag in unserer Komponente abrufen werden. Navigieren Sie zur App component.html Seite und fügen Sie den folgenden Codeblock ein:

<div class="container">
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" 
    [routerLink]="['/about']"
    [queryParams]="{part: 'navbar',search: 'about', year: 2021 }"   [fragment]='"hello"'>About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/contact']">Contact</a>
  </li>
</ul>
<router-outlet></router-outlet>
</div>

Wenn Sie nun alle Dateien im Projekt speichern und die App auf Ihrem Entwicklungsserver ausführen, sollte sie so aussehen:

Sie können die Abfrageparameter und das Fragment in der URL so sehen, wie wir es möchten.

Daten abrufen

Nachdem wir nun die Parameter und das Fragment gesendet und bestätigt haben, dass es in der URL angezeigt wird, versuchen wir, die Daten abzurufen und sogar in der Vorlage anzuzeigen. Ihre about Die Komponentendatei sollte wie folgt aussehen:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
constructor() { }
ngOnInit(): void {
  }
}

Lassen Sie uns nun die aktivierte Route einbringen, während wir versuchen, einen Schnappschuss davon zu machen, wie die Abfrageparameter aussehen und auch, wie das Fragment in der URL aussieht. Abfrageparameter geben ein Objekt zurück, während Fragmente einen String zurückgeben.

Wir können es testen, indem wir einfach die Werte protokollieren:

console.log(this.route.snapshot.queryParams);
console.log(this.route.snapshot.fragment);

Denken Sie daran, dass Sie die aktivierte Route einbringen müssen, um die Snapshot-Option zu verwenden:

import { Component, OnInit } from '@angular/core';
import {  ActivatedRoute, Router } from '@angular/router';
@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit(): void {
    console.log(this.route.snapshot.queryParams);
    console.log(this.route.snapshot.fragment);
  }
}

Ihre about Komponente sollte in der Browser-Konsole eine Rückgabe wie diese haben:

Anzeigen der Daten

Wir haben die Daten aus der URL erhalten – gibt es nun eine Möglichkeit, sie in unserer Vorlage statt in der Browserkonsole anzuzeigen? Kopieren Sie den Codeblock unten in etwa component.ts Datei:

import { Component, OnInit } from '@angular/core';
import {  ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
  details: { year:number; part: string; greeting:string}
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
    console.log(this.route.snapshot.queryParams);
    console.log(this.route.snapshot.fragment);
this.details = {
      part: this.route.snapshot.queryParams['part'],
      year: this.route.snapshot.queryParams['year'],
      greeting: this.route.snapshot.fragment
    }
  }
}

Jetzt haben wir ein Detailobjekt erstellt und haben Variablen für Teile der Abfrageparameter und des Fragments, und wir haben die Variablen mit den Snapshots der bereits erhaltenen Daten verknüpft.

Grundlagen von Angular:Datenproduzenten in JavaScript vergleichen

Lernen Sie die Unterschiede zwischen Funktionen, Promises, Iterables und Observables kennen. Jeder kann einen Wert/eine Folge von Werten erzeugen und an die Verbraucher senden.

Als nächstes müssen die Daten in der Vorlage angezeigt werden, also ändern wir den Codeblock in der Präsentation.

Navigieren Sie zu about HTML-Datei der Komponente und ersetzen Sie den Inhalt durch den folgenden Codeblock:

<div>
    <p>This is the about Page</p>
    <p>{{details.greeting}}, you are currently inside the {{details.part}} for the app and this was built in {{details.year}}</p>
</div>

Wir haben jetzt die Datenbindung verwendet, um die Daten, die wir haben, an die Vorlage zu binden und sie in einen Absatz einzubetten.

Wenn Sie nun alle Dateien speichern und Ihren Browser unter localhost:4200 überprüfen, sollten Sie Folgendes sehen:

So erhalten Sie Daten aus den Abfrageparametern und Fragmenten in einer beliebigen Angular-URL, passen den Inhalt in der Vorlage an und zeigen ihn an.

Schlussfolgerung

Im heutigen Beitrag haben wir gesehen, wie Abfrageparameter und Fragmente innerhalb der URL mit dem Angular Router problemlos abgerufen und sogar in unserer Anwendung angezeigt werden können. Es gibt viele Möglichkeiten und Anwendungsfälle, in denen Sie dies in Ihren Anwendungen anwenden können. Viel Spaß beim Hacken!