Angular Academy · Pelajaran

Parameter Rute dan Parameter Kueri

Baca dan tanggapi parameter rute.

Parameter Rute dan Parameter Kueri adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Param rute vs param kueri

Param rute merupakan bagian dari jalur (/user/42). Param kueri ditambahkan setelah ? (/search?q=ng&page=2). router memberi Anda akses reaktif ke keduanya.

Mendefinisikan param rute

Gunakan titik dua pada jalur untuk mendeklarasikan parameter.

export const routes = [
  { path: 'user/:id', component: UserComponent }
];

Membaca param dengan paramMap

ActivatedRoute.paramMap adalah observable yang menghasilkan nilai setiap kali param rute berubah. Gunakan .get() untuk membaca nilai.

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

Mengapa param perlu diamati

Bernavigasi dari /user/1 ke /user/2 dapat menggunakan kembali komponen. Konstruktor dijalankan sekali, tetapi paramMap menghasilkan nilai lagi — jadi berlanggananlah untuk merespons perubahan tersebut.

Snapshot untuk pembacaan satu kali

Jika komponen tidak pernah digunakan kembali untuk param yang berbeda, Anda dapat membaca snapshot secara sinkron.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

Param kueri dengan queryParamMap

queryParamMap menyediakan nilai string kueri, juga dalam bentuk observable.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

Bernavigasi dengan param kueri

Gunakan opsi queryParams dalam router.navigate atau direktif routerLink.

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

Mempertahankan param kueri

queryParamsHandling: 'merge' mempertahankan param yang ada saat memperbarui sebagian param; 'preserve' membawanya selama navigasi.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

Pengikatan input komponen (modern)

Dengan withComponentInputBinding(), param rute dan kueri dapat diikat langsung ke @Input() komponen (atau sinyal input), tanpa menggunakan ActivatedRoute.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

getAll untuk param berulang

Gunakan getAll() saat kunci kueri dapat muncul beberapa kali, misalnya ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

Menggabungkan param dengan pemuatan data

Pola yang umum: petakan param ke panggilan HTTP dengan switchMap agar perubahan id memicu pengambilan ulang.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

Pemeriksaan Cepat

Uji pemahaman Anda tentang parameter rute.

Ringkasan: Param Rute & Kueri

router menyediakan param secara reaktif.

paramMap: param jalur, amati untuk penggunaan kembali.
queryParamMap: string kueri, dengan getAll untuk nilai berulang.
snapshot untuk pembacaan satu kali.
withComponentInputBinding() mengikat param ke input.

Berikutnya: penyelesai dan data rute.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Parameter Rute dan Parameter Kueri” gratis?

Ya — teks lengkap “Parameter Rute dan Parameter Kueri” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Parameter Rute dan Parameter Kueri”?

Baca dan tanggapi parameter rute. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Parameter Rute dan Parameter Kueri” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy