CODEWITHSUNDEEP
javascriptangularroutes
Scott DePouw
Scott DePouw

Reputation: 3899

Angular Routing: Define Multiple Paths for Single Route

I've seen several answers to this, but I'm not sure if they necessarily "fit" my scenario (I'm not trying to create parent/child routing relationships or anything like that). In my case I have a component that's responsible for adding new widgets, or editing existing widgets. My routes are defined like so:

const routes: Routes = [
  {
    path: 'widget/add',
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  },
  {
    path: 'widget/:id/edit',
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  },
];

path is a string so it can't accept an array of values or anything like that. Is there a way to specify multiple paths for a single route so I don't have to duplicate the other parts of the route (the component, canActivate, and data parts)?

Note: The paths cannot be changed due to application requirements (i.e. I can't just make a single manage path).

Edit: My ManageWidgetComponent already has the correct logic for handling Create vs. Edit. That part's fine.

Upvotes: 1

Views: 5154

Answers (3)

ctruchi
ctruchi

Reputation: 153

I think you could do something like this :

const routes: Routes = ['widget/add', 'widget/:id/edit'].map(path => {
 return {
    path: path,
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  };
});

Upvotes: 2

salah3x
salah3x

Reputation: 231

By convention, there is a one to one relationship between a route and a path (they are basically the same thing), So you can't have different paths for a single routes. But you can have different paths that loads the same component (and that's what you're doing in the example above)

A way to solve this problem would be :

{
   path: 'widget/:id',
   component: ManageWidgetComponent,
   canActivate: [CanActivateViaRoleGuard],
   data: { roles: ['Admin', 'User'] }
},

Then you can navigate to widget/add or widget/123

And in ManageWidgetComponent:

this.route.params.subscribe((params) => {
    if (params.id === 'add') {
        // Add new user
    } else {
        // Edit user with id = +params.id
    }
});

Upvotes: 0

Mohammadreza Imani
Mohammadreza Imani

Reputation: 340

you can use this format :

  {
     path: 'widget/:id/add-edit',
     component: ManageWidgetComponent,
     canActivate: [CanActivateViaRoleGuard],
     data: { roles: ['Admin', 'User'] }
  },

and in ManageWidgetComponent use fallowing code to check if there is a value for "id"? if there is no value for id so you are adding a new user and if there is a value for "id" so you are editing a user.

this.route.params.subscribe((params: any) => {
        if (params.id) {
            //////you are editing a user
        }else{
            ///// you are adding a new user
        }
     }
);

Upvotes: 0

Related Questions