Angular router: Retain entire url even if partial prefix url is matched

0
votes

By default pathToMatch property is prefix. I have configured a url with 

{path: 'courses', component: CoursesComponent},
{path: '**', redirectTo: 'courses'}

I opened the browser and redirected my page to say https://localhost:4200/#/courses/12/someInfo

The url can be /courses/../../../.. till any level of depth.

Angular router internally redirects to https://localhost:4200/#/courses url.

I want to persist the other info also in above scenario which is .../12/someInfo

I need that info because inside my CoursesComponent i am loading a non angular microservice which needs that url info. That microservice internally manages to initialize different courses urls based on hashable url.

How can an maintain the url on pageload without allowing angular to trim url to defined routes?

2
angular
Is /courses a valid url, or is it always followed by /{number}/{someInfo}? I'm assuming both {number} and {someInfo} are changeable parameters here? – Kurt Hamilton
/courses is a valid url. – Mayur Patil
actually i was also looking if i can remove intial / after hash. something like /#courses/id/something instead of /#/courses/.. – Mayur Patil

2 Answers

0
votes

I tried a hack and it worked...

{path: 'courses', component: CoursesComponent, children: [
  {path: '**', component: RenderYourMicroserviceComponent}
]},
{path: '**', redirectTo: 'courses'}
0
votes

I think your approach is not the best, also your code redirects to courses because is the the default route when the route write doesn't exist.

If you want to pass a finite number of params through the url, for example, id and title, you can do the following:

{path: 'courses/:id/:title', component: CoursesComponent},

This example will work for your url: https://localhost:4200/#/courses/12/someInfo. But the url will always have to be "/courses/id/title"

If you want to pass more information I recommend you use a service like this one:

courseService

@Injectable()
export class CourseService {
   currentCourse: Course;

   getCurrentCourseInfo(): Course {
     return this.currentCourse;
 }
  setCurrentCourseInfo(course: Course): void {
    this.currentCourse = course;
 }
}

Then in your origin component:

goToCourseDetail(course: Course): void {
  this.courseService.setCurrentCourseInfo(course);
  this.router.navigate(['courses/' + id]);
}

to retrieve the information on the microservice component:

this.course =  this.currentService.getCurrentCourseInfo();

now in this.course you will have the whole course info available