typescript - Angular - Mendapatkan rute yang sedang aktif saat ini dan menavigasi ulang ke halaman yang sama dengan parameter rute yang berbeda

Saya sedang mencoba untuk mendapatkan rute saat ini dan menavigasi ke rute yang sama setelah mengubah itemCode di kotak pencarian di header. Ketika saya pertama kali masuk ke halaman, rute induknya adalah "iauth/iauthedit/1706" kemudian pengguna menavigasi ke rute anak "/info", ada beberapa rute lain yang dapat dinavigasi pengguna dari bilah Navigasi samping yang tidak ditampilkan di gambar di bawah ini. Ketika saya mengubah kode item menjadi 1853 di header aplikasi seperti yang ditunjukkan di gambar, URL seharusnya berubah menjadi "iauth/iauthedit/1853/info", bagaimana saya bisa mengubah parameter rute URL di browser secara dinamis berdasarkan URL rute saat ini di browser? Saya sedang mencoba mencari rute yang sedang diaktifkan saat ini yang dalam skenario ini rute induk "iauth/iauthedit/" dari URL browser, sehingga saya bisa melakukan navigasi.

this.router.navigate(['iauth/iauthedit/', 1853];

Berikut adalah rute saat ini:

const itemAuthRoutes: Routes = [
    {
        path: 'iauthedit/:itemCode',
        children: [
            {
                path: '',
                canActivate: [AuthGuard],
                //data: { feature: AppFeature.AuthorizedItem },
                component: ItemAuthorizationEditComponent,
                children: [
                    {
                        path: 'info', component: ItemAuthorizationInfoEditComponent
                    }]
            }]
    }]

Jawaban #1

Masalah dengan ActivatedRoute yang diberikan dari Angular adalah bahwa nilainya bergantung pada komponen tempat ia disuntikkan. Memang, ketika Anda menyuntikkan ActivatedRoute dalam sebuah komponen, nilainya tidak akan menjadi rute penuh, tetapi bagian dari rute yang menampilkan komponen tersebut.

Itu berarti jika Anda ingin mengambil URL lengkap di komponen yang berisi input "kode item", Anda tidak bisa melakukannya dengan menggunakan API Angular. Jadi saya sarankan Anda untuk mengurai URL dengan menggunakan API Javascript bawaan, kemudian memicu navigasi dengan this.router.navigate.

Angular cukup cerdas pada titik ini, itu tidak akan memuat ulang komponen dan Anda akan dapat merespons perubahan params dengan menggunakan this.activatedRoute.params.subscribe(...), kemudian memuat data baru dan meneruskannya ke anak melalui properti @Input().

Jawaban #2

Anda dapat mencoba menelusuri properti path dari routeConfig

constructor(private activatedRoute: ActivatedRoute, private router: Router) {}

navigate(newId: string) {
  let route = this.activatedRoute.snapshot;
  const parts = [];
  while (route) {
    route.routeConfig && route.routeConfig.path && parts.push(route.routeConfig.path);
    route = route.parent;
  }
  // `parts` now contain your route's pieces - do whatever you deem fit with that
  parts[1] = newId; // i.e. replace the part that needs replacing
  this.router.navigate(parts.reverse());
}

Semoga ini sedikit membantu :-)