Маршрутизатор Angular: сохранение полного URL-адреса, даже если URL-адрес частичного префикса совпадает

Question

По умолчанию свойство pathToMatch является префиксом. Я настроил URL с

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

Я открыл браузер и перенаправил свою страницу, чтобы сказать https://localhost: 4200 / # / курсы / 12 / someInfo

URL может быть / courses /../../../.. до любого уровня глубины.

Angular маршрутизатор внутренне перенаправляет на https://localhost: 4200 / # / courses url.

Я хочу сохранить другую информацию также в приведенном выше сценарии, который ... / 12 / someInfo

Мне нужно эта информация, потому что внутри моего CoursesComponent я загружаю не angular микросервис, который нуждается в этой информации URL. Микросервису внутренне удается инициализировать URL-адреса различных курсов на основе хешируемого URL-адреса.

Как сохранить URL-адрес при загрузке страницы, не позволяя angular обрезать URL-адрес до определенных маршрутов?

Answer 1

Я думаю, что ваш подход не лучший, и ваш код перенаправляет на курсы, потому что это маршрут по умолчанию, когда запись маршрута не существует.

Если вы хотите передать конечное число параметров через URL, например, идентификатор и заголовок, вы можете сделать следующее:

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

Этот пример будет работать для вашего URL: https://localhost: 4200 / # / courses / 12 / someInfo . Но URL всегда должен быть "/ courses / id / title"

. Если вы хотите передать больше информации, я рекомендую вам воспользоваться такой услугой, как эта:

courseService

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

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

Затем в исходном компоненте:

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

для получения информации о микросервисном компоненте :

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

теперь в this.course вам будет доступна вся информация о курсе

Answer 2

Я попробовал взломать, и это сработало ...

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