Angular - How to point multiple routes to a single component-CodePudding

Hi below is my scenario.

I have two child modules with different routes

Eg route 1 :

http://localhost:4200/launch/upcoming/launchdetails

Eg route 2 :

http://localhost:4200/launchdetails

I am trying to navigate to route 2 from route 1 using below route path in child module, but its not working.

{path:'/launchdetail/:slug',component:LaunchDetailComponent}

Appreciate for any ideas on how to achieve this

CodePudding user response：

You can use pathMatch:string or matcher:UrlMatcher while defining the routeConfigs

eg: {path:'/launchdetail/:slug',component:LaunchDetailComponent, pathMatch: 'full'}

For pathMatch please read the subset of official documentation below:

The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'.

By default, the router checks URL elements from the left to see if the URL matches a given path and stops when there is a config match. Importantly there must still be a config match for each segment of the URL. For example, '/team/11/user' matches the prefix 'team/:id' if one of the route's children matches the segment 'user'. That is, the URL '/team/11/user' matches the config {path: 'team/:id', children: [{path: ':user', component: User}]} but does not match when there are no children as in {path: 'team/:id', component: Team}.

The path-match strategy 'full' matches against the entire URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

CodePudding user response：

You can use the following configuration:

    RouterModule.forRoot([
      { path: 'one/:id/:value', component: SomeComponent },
      { path: 'another/:id/:value', redirectTo: '/one/:id/:value' }
    ])

Note, that the URL will be changed to redirected one too.