Oldingi 3-dars uchun havola: Routerni burchakli TS faylidan navigatsiya qilish (Dasturlash navigatsiyasi)

«https://medium.com/@yuvayuvaraj720444/router-03-navigate-router-from-angular-ts-file-programming-navigation-dc68d4928974”

Men bitta komponent yaratdim va dinamik komponent deb nomladim.

app.module.ts da,

Routerni biz ishonchimiz komil bo'lmagan parametr uchun sozlash. Ikki nuqta (:) va dinamik qiymat nomini belgilaymiz. Bu erda men identifikatorni e'lon qildim.

Bularning barchasi marshrut konfiguratsiyasi uchun.

Ushbu vazifani Jonli demo bilan oʻrganing: https://stackblitz.com/edit/angular-ivy-parameter-router

app.component.tsfaylida

Html kodi ko'p emas. Bosh sahifaga marshrutni o'tkazish uchun bitta div, dinamik ravishda yaratilgan qiymatlarni olish va dinamik komponent HTML faylida ko'rsatish uchun dinamik komponentga dasturiy ravishda o'tish uchun bitta div.

app.component.html chiqishi

app.component.ts faylida, bu erda asosiy kodkontsentratsiya

route navigate argument sifatida massivni oladi, birinchi navbatda u dinamikga o'tadi va ikkinchi yo'l uchun 0 dan 10 gacha tasodifiy qiymatni oladi.

BUNI HAMMASI DINAMIK QIMMATLARGA O'TISH HAQIDADI

ENDI DINAMIK QIMMATLARNI OLISH UCHUN

Men uni oddiy html qildim, u faqat ikkita ishni bajaradi, anker havolasi qiymatni dasturiy ravishda o'tkazish va dinamik qiymatlarni olish uchun {{ id }}.

Dinamik komponentli ts faylida.

Routerni import qildim, activatedRoute va konstruktorga xuddi shunday kiritdim.

Oddiy so'z bilan aytganda, activatedRouter marshrutizator qiymatlarini olish uchun va router boshqa yo'riqnomaga yo'naltirish uchun ishlatiladi.

marshrut qiymatlarini olish uchun biz faollashtirilgan marshrut suratidan foydalanamiz.

Chiqish

Har safar uni bosganingizda qiymat o'zgaradi va dinamik yo'nalishga o'tadi.

Keyingi blogda

"Router 5: Surat o'rniga marshrut parametrlarini olish uchun Kuzatiladiganlardan foydalanish"

— — — — — — — — — Maʼruza oxiri — — — — — — —

Angular Intermediate darslarining barcha darslarini tekshiring

https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b