Weboldal keresés

javascript - Globálisan elérhető URL-paraméter az Angular routerben

Próbálok létrehozni egy térképközpontú alkalmazást, hasonlót a Google Maps-hez. Tehát főként egy térkép van, és az URL útvonalától függően egy komponenst töltenek be egy kis oldalsó panelen belül.

export const routes: Routes = [
    {path: 'home/:coordinates', component: HomeComponent},
    {path: 'dashboard/:coordinates', component: DashboardComponent},
    {path: 'utils/:coordinates', component: UtilsDemo},
];

Amit el szeretnék érni, az hasonló a Google Maps-hez:

/home/@54.072,-2.899 --> betölti a HomeComponent-et és a 54.072,-2.899 koordinátákra navigál

/dashboard/@53.123,2.345 --> betölti a DashboardComponent-et és a 54.123,2.345 koordinátákra navigál

Azonban a :coordinates paraméternek nem szabad a komponenshez helyi szinten tartoznia, hanem valahogy globálisan kellene. Különben a navigációs részt minden egyes komponensben meg kellene csinálnom.

Más szóval: Ha ezt teszem:

this.route.params.subscribe(params => {
   console.log(params['coordinates']);
});

A AppComponent-en belül a paraméter nincs meghatározva. Ez csak az egyes konkrét komponenseken belül működik.

Van valami mód erre Angular5-ben?

Válasz #1

Talán a Route Resolver egy lehetőség számodra. Általában arra használják, hogy adatokat kérjenek le a szerverről, mielőtt egy útvonalra navigálnának, de te egyszerűen beletehetnéd a navigációs logikádat is.

  1. Hozzon létre egy NavigationResolver szolgáltatást a navigációs logikájához
  2. A szolgáltatás megvalósítja a Resolve interfészt.

  3. A resolve metóduson belül kiemeled a paramétereket, és elindítod a navigációs logikát

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
  let coordinates = route.paramMap.get('coordinates');

  // This is where your navigation happens
  return this.navigateTo(coordinates)
}

  4. Hozzáadod a NavigationResolver-t minden olyan útvonalhoz, amelynek kezelnie kell a paramétereket:

    {
  path: 'home/:coordinates',
  component: HomeComponent,
  resolve: {
    navigationResult: NavigationResolver
  }
},

  5. Szükség esetén a feloldott navigációs adatokhoz a komponenseiden belül is hozzáférhetsz a következő módon

    ngOnInit() {
  this.route.data
    .subscribe((data: { navigationResult: NavigationResult }) => {
      this.navigation = data.navigationResult;
    });
}

Olvasson többet a Útvonal-feloldókról a hivatalos dokumentációban.

Válasz #2

Alternatív megoldás: Használjon lekérdezési paramétereket

Az útvonal paraméterek példájában csak az útvonalra specifikus paraméterekkel foglalkoztál, de mi van akkor, ha opcionális paramétereket szeretnél, amelyek minden útvonalhoz elérhetők? Itt lépnek be a képbe a lekérdezési paraméterek.

Feliratkozhat a ActivatedRoute queryParamMap-jára (például az AppComponent-ben), és elvégezheti a navigációs logikát, amikor a paraméter megváltozik:

this.route
      .queryParamMap
      .map(params => params.get('coordinates'))
      .subscribe(coordinates => this.navigationService.navigateTo(coordinates))

Kapcsolódó cikkek