Angular: Dinamikus router url.

Angular: Dinamikus router url.
2019-02-19T08:44:24+01:00
2019-02-21T08:27:20+01:00
2022-10-15T21:31:45+02:00
VaMa
Üdv!

Szeretnék csinálni Angular-ban egy dinamikus router url felépítést újrafelhasználható komponensekkel, lényegében azért, mert a projektem rengeteg (al)oldalt tartalmaz, amiből néhánynak ugyanaz a sémája.
Példa:
A router-ben alapvetően 3 komponens használható:
ArticleComponent,
AlbumComponent,
FileComponent

Ezek párosodnak az url-ekkel, van hogy egy Article több url-hez tartozik, a tartalom mindig más, adatbázisból jönnek.
Sajnos nehezen találtam rá példát, magam is nehezen küzdöttem meg a feladattal:

App.Routing.Module.ts:

import { NgModule, OnInit, Type } from '@angular/core'; import { Routes, Route, RouterModule, PreloadAllModules, Data } from '@angular/router'; import { RoutingService } from './_services/routing.service'; import { RouteInstance } from './_models/route-instance'; import { ArticleComponent } from './_pages/article/article.component'; import { AlbumComponent } from './_pages/album/album.component'; import { FileComponent } from './_pages/file/file.component'; import { AngularRouteInstance } from './_models/angular-route-instance'; export var routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes,{preloadingStrategy: PreloadAllModules})], exports: [RouterModule] }) export class AppRoutingModule implements OnInit{ constructor(private _routingService: RoutingService){ this._routingService.GetRoutes().subscribe(routesArray=>{ routesArray.forEach(singleRoute=>{ let routesInstance:Route = this.GetRoutes(singleRoute,routesArray) routes.push(routesInstance); }) }, error=>{ alert('Error!'); }); } ngOnInit() { } GetRoutes(route: RouteInstance, routesArray: RouteInstance[]): Route{ let ari = new AngularRouteInstance(); ari.path = route.path; ari.redirectTo = route.redirect_to; ari.pathMatch = route.path_match; ari.data.title = route.title; ari.component = this.GetComponent(route); ari.children = this.GetChildren(route,routesArray); return ari; } GetChildren(singleRoute: RouteInstance, routesArray: RouteInstance[]): Route[] { routesArray.forEach(route=>{ if (route.route_id){ if (route.route_id === singleRoute.id){ let ari = new AngularRouteInstance(); ari.path = route.path; ari.redirectTo = route.redirect_to; ari.pathMatch = route.path_match; ari.data.title = route.title; ari.component = this.GetComponent(route); ari.children = this.GetChildren(route,routesArray); } } }); return routesArray; } GetPath(route:RouteInstance): string{ if (route.path) return route.path; else return undefined; } GetComponent(route:RouteInstance): Type<any>{ if (route.page_type_id){ switch(route.page_type_id){ case 1: return ArticleComponent; case 2: return AlbumComponent; case 3: return FileComponent; default: return undefined; } } return undefined } }

Kérdésem, hogy a fenti kódban mit ronthattam el?

Előre is köszi!
VaMa
Mutasd a teljes hozzászólást!

  • Udv.

    Nem igazan ertem a koncepciodat. Kifejetened bovebben, hogy mi volna a celod a dinamkius route-al? Hatha talalunk egy masik megoldast a problemadra...
    Mutasd a teljes hozzászólást!
  • Bocs, kicsit gyorsan kellett megírnom, így konkrétan leírni nem tudtam.

    Van egy portfólió weboldal, amit Angular-ban szeretnék megvalósítani. Ez a weboldal több lapot tartalmaz: Önéletrajz, Galéria, Interjúk, TV interjúk, Rádió interjúk, írások.

    Ezeket egy csoportba szeretném képezni:

    Cikk típusúak pl.: Önéletrajz, írások, irodalom.
    Fájl típusúak: Rádió interjúk (hanganyagok miatt), TV interjúk (videóanyagok miatt).
    Album típusúak: Galéria

    Azért, mert pl.: Egy önéletrajz felépítése UI oldalon ugyanaz, mint az írásoké, irodalomé.
    Vagy pl.: Rádió interjúk UI oldala ugyanaz, mint a videóinterjúké, csak a fájltípus különbözik, azt Angular oldalon meg lehet oldani.

    Lényegében szűkíteni akarom a komponensek létrehozását, hogy felesleges, ismétlődő kódok ne kerüljenek bele, tehát komponens újrafelhasználást szeretnék csinálni.
    Mutasd a teljes hozzászólást!
  • Szia!

    Miért nem használsz route paramteres -t? A paraméter alapján döntöd el hogy milyen tartalmat akarsz megjeleníteni az adott komponensen.

    Angular Docs
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd