logo

Angular Basics:Získávání dat z fragmentů a parametrů dotazu

V tomto příspěvku se podíváme na to, jak můžete získat data z parametrů URL dotazu v Angular uvnitř komponenty pomocí modulu Router.

Než začneme

Tento příspěvek je vhodný pro všechny úrovně frontendových vývojářů, kteří používají Angular, takže se nepředpokládá znalost začátečnických konceptů a instalačních procesů. Zde je několik předpokladů, které byste měli dodržovat při ukázce tohoto článku:

  • Integrované vývojové prostředí, jako je VS Code
  • Uzel verze 11.0 nainstalovaný ve vašem počítači
  • Node Package Manager verze 6.7 (obvykle se dodává s instalací Node)
  • Angular CLI verze 8.0 nebo vyšší
  • Nedávná verze Angular (tento příspěvek používá Angular 12)

Mezi další užitečné věci patří:

  • Pracovní znalost rámce Angular na úrovni začátečníka

Další koncepty směrování

V minulém příspěvku jsme se podívali na parametry dotazu a pochopili, jak se pomocí Angular Routeru vytvářejí adresy URL, jako je ta níže.

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

Co stavíme

Dnes budeme pracovat na komponentě Navbar s komponentami about a contact a použijeme parametry dotazu a poté načteme podrobnosti v jedné z komponent. Budeme pokračovat od posledního příspěvku, takže si odtud stáhněte zdrojový soubor do svého počítače.

Otevřete nový soubor ve VS Code a uvnitř terminálu spusťte příkaz níže:

npm install

To zajišťuje, že všechny moduly uzlů a závislosti potřebné pro projekt jsou správně nainstalovány. Soubor app component.html by měl vypadat takto:

<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>

Definování parametrů

Nyní přidejte parametry, které načteme v naší komponentě později v příspěvku. Přejděte do aplikace component.html stránku a vložte blok kódu níže dovnitř:

<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>

Pokud nyní uložíte všechny soubory v projektu a spustíte aplikaci na svém dev serveru, měla by vypadat takto:

Parametry dotazu a fragment se zobrazují v adrese URL tak, jak chceme.

Získání dat

Nyní, když jsme odeslali parametry a fragment a potvrdili, že se zobrazují v adrese URL, zkusme získat data a dokonce je zobrazit v šabloně. Vaše about soubor komponenty by měl vypadat takto:

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 {
  }
}

Nyní přinesme aktivovanou trasu, když se snažíme pořídit snímek toho, jak vypadají parametry dotazu a také jak vypadá fragment v URL. Parametry dotazu vrátí objekt, zatímco fragmenty vrátí řetězec.

Můžeme to otestovat pouhým protokolováním hodnot:

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

Nezapomeňte, že pro použití možnosti snímku musíte uvést aktivovanou trasu:

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);
  }
}

Vaše about komponenta by měla mít v konzole prohlížeče návrat takto:

Zobrazení dat

Získali jsme data z adresy URL – existuje nyní způsob, jak je můžeme zobrazit v naší šabloně namísto v konzole prohlížeče? Zkopírujte níže uvedený blok kódu do component.ts soubor:

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
    }
  }
}

Nyní jsme vytvořili objekt detailů a máme proměnné pro části parametrů dotazu a fragmentu a svázali jsme proměnné se snímky dat, která jsme již získali.

Angular Basics:Porovnání datových producentů v JavaScriptu

Naučte se rozlišovat funkce, přísliby, iterovatelné a pozorovatelné. Každý může vytvořit hodnotu/posloupnost hodnot a poslat ji spotřebitelům.

Další věcí, kterou musíte udělat, je zobrazit data v šabloně, takže změňme blok kódu v prezentaci.

Přejděte na about HTML soubor komponenty a nahraďte obsah blokem kódu níže:

<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>

Nyní jsme použili datovou vazbu k navázání dat, která máme, k šabloně a vložili je do odstavce.

Nyní, když uložíte všechny soubory a zkontrolujete svůj prohlížeč na localhost:4200, měli byste vidět, že se zobrazí takto:

To je způsob, jak získat data z parametrů a fragmentů dotazu v jakékoli Angular URL, přizpůsobit a zobrazit obsah uvnitř šablony.

Závěr

V dnešním příspěvku jsme viděli, jak lze parametry dotazu a fragmenty uvnitř adresy URL snadno načíst a dokonce zobrazit v naší aplikaci pomocí úhlového směrovače. Existuje mnoho způsobů a případů použití, kde to můžete použít ve svých aplikacích. Šťastné hackování!