Angular 2 optional route parameter

Question

Is it possible to have an optional route parameter in the Angular 2 route  I tried the Angular 1 x syntax in RouteConfig but received below error        ORIGINAL EXCEPTION  Path   user  id   contains     which is not allowed in a route config      RouteConfig         path    user  id        component  User      as   User

User · Answer

I can t comment  but in reference to  Angular 2 optional route parameter  an update for Angular 6   import  map  from  rxjs operators   constructor route  ActivatedRoute      let paramId   route params pipe map p   gt  p id       if  paramId                    See https   angular io api router ActivatedRoute for additional information on Angular6 routing

User · Answer

Angular 4 - Solution to address the ordering of the optional parameter   DO THIS   const appRoutes  Routes        path      component  HomeComponent      path   products   component  ProductsComponent      path   products  id   component  ProductsComponent      Note that the products and products  id routes are named exactly the same   Angular 4 will correctly follow products for routes with no parameter  and if a parameter it will follow products  id   However  the path for the non-parameter route products must not have a trailing slash  otherwise angular will incorrectly treat it as a parameter-path   So in my case  I had the trailing slash for products and it wasn t working   DON T DO THIS        path   products    component  ProductsComponent    path   products  id   component  ProductsComponent

User · Answer

Ran into another instance of this problem  and in searching for a solution to it came here  My issue was that I was doing the children  and lazy loading of the components as well to optimize things a bit  In short if you are lazy loading the parent module  Main thing was my using    id  in the route  and it s complaints about     being a part of it  Not the exact problem here  but it applies   App-routing from parent       const routes  Routes             path          children                    path   pathOne           loadChildren   app views  MODULE PATH module PathOneModule                           path   pathTwo           loadChildren   app views  MODULE PATH module PathTwoModule                 Child routes lazy loaded      const routes  Routes             path          children                    path              component  OverviewComponent                          path    id           component  DetailedComponent

User · Answer

With this matcher function you can get desirable behavior without component re-rendering  When url length equals to 0  there s no optional parameters  with url length equals to 1  there s 1 optional parameter  id - is the name of optional parameter    const routes  Routes             matcher   segments    gt          if  segments length  lt   1            return             consumed  segments            posParams                id  new UrlSegment segments 0   path                                                   return null             pathMatch   prefix       component  UserComponent

User · Answer

It s recommended to use a query parameter when the information is optional      Route Parameters or Query Parameters       There is no hard-and-fast rule  In general       prefer a route parameter when         the value is required    the value is necessary to distinguish one route path from another          prefer a query parameter when         the value is optional    the value is complex and or multi-variate       from https   angular io guide router optional-route-parameters  You just need to take out the parameter from the route path    RouteConfig         path    user        component  User      as   User

User · Answer

With angular4 we just need to organise routes together in hierarchy  const appRoutes  Routes              path           component  MainPageComponent                path   car details        component  CarDetailsComponent                path   car details platforms-products        component  CarProductsComponent                path   car details  id        component  CadDetailsComponent                path   car details  id platforms-products        component  CarProductsComponent           This works for me   This way router know what is the next route based on option id parameters

User · Answer

Facing a similar problem with lazy loading I have done this   const routes  Routes             path   users       redirectTo   users        pathMatch   full               path   users       loadChildren     users users module UserssModule       runGuardsAndResolvers   always               And then in the component     ngOnInit         this activatedRoute paramMap pipe        switchMap           params  ParamMap    gt              let id  string   params get  id              if  id                      return of undefined                         return this usersService getUser Number params get  id                              subscribe user   gt  this selectedUser   user         This way    The route without   is redirected to the route with  Because of the pathMatch   full   only such specific full route is redirected  Then  users  id is received  If the actual route was users   id is     so check it in ngOnInit and act accordingly  else  id is the id and proceed  The rest of the componect acts on selectedUser is or not undefined   ngIf and the things like that

User · Answer

The suggested answers here  including the accepted answer from rerezz which suggest adding multiple route entries work fine   However the component will be recreated when changing between the route entries  i e  between the route entry with the parameter and the entry without the parameter    If you want to avoid this  you can create your own route matcher which will match both routes   export function userPageMatcher segments  UrlSegment     UrlMatchResult       if  segments length  gt  0  amp  amp  segments 0  path      user             if  segments length     1                return                   consumed  segments                  posParams                                       if  segments length     2                return                   consumed  segments                  posParams    id  segments 1                                      return  lt UrlMatchResult gt  null as any             return  lt UrlMatchResult gt  null as any        Then use the matcher in your route config   const routes  Routes                   matcher  userPageMatcher          component  User

User · Answer

You can define multiple routes with and without parameter    RouteConfig         path    user  id   component  User  name   User           path    user   component  User  name   Usernew         and handle the optional parameter in your component   constructor params  RouteParams        var paramId   params get  id         if  paramId                          See also the related github issue  https   github com angular angular issues 3525

User · Answer

rerezz s answer is pretty nice but it has one serious flaw  It causes User component to re-run the ngOnInit method   It might be problematic when you do some heavy stuff there and don t want it to be re-run when you switch from the non-parametric route to the parametric one  Though those two routes are meant to imitate an optional url parameter  not become 2 separate routes   Here s what I suggest to solve the problem   const routes             path    user       component  User      children            path    id   component  UserWithParam  name   Usernew                   Then you can move the logic responsible for handling the param to the UserWithParam component and leave the base logic in the User component  Whatever you do in User  ngOnInit won t be run again when you navigate from  user to  user 123   Don t forget to put the  lt router-outlet gt  lt  router-outlet gt  in the User s template

User · Answer

path   users   redirectTo   users    pathMatch   full     path   users  userId   component  UserComponent    This way the component isn t re-rendered when the parameter is added

[javascript] Angular 2 optional route parameter

Examples related to javascript

Examples related to angular