Angular Router Navigate перезагружает ленивые загруженные родительские компоненты

Question

У меня есть ModuleA, который загружен лениво и имеет указанные ниже компоненты и их маршруты;

path: 'JobView/:id', component: JobViewComponent, children: [
  { path : '', redirectTo: 'AppliedCandidates', pathMatch: 'full'},
  { path: 'AppliedCandidates', component: AppliedCandidatesComponent },
  { path: 'AssignCandidates', component: AssignCandidatesComponent }
]

Содержимое JobViewComponent выглядит следующим образом:

  <div class="col-xl-3 pr-3">
    <job-detail-view> </job-detail-view>
  </div>
  <div class="col-xl-9 pl-3">
    <div class="portlet">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Когда я перемещаюсь по любому братскому маршруту, используя навигацию по маршрутизатору, например, переход к AppliedCandidates , нажав на ссылкуиз AssignedCandidates с использованием,

this.router.navigate(['../AppliedCandidates'], {
      relativeTo: this.route});

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

Редактировать: На самом деле, это работает, но проблема в том, что он также перезагружает родительский компонент, т.е. Не случится, если я не ленюсь загружать эти модули. Я подробно рассмотрел эту проблему и узнал, что это происходит из-за некоторых распространенных пакетов с префиксом по умолчанию, как показано ниже.

Загружает два дополнительных пакета с префиксом по умолчанию. Если эти пакеты не загружены, моей проблемы не возникает. Я думаю, что это происходит потому, что некоторые службы модуля-кандидата используются в других загружаемых модулях. Любая помощь, чтобы преодолеть эту проблему, будет оценена.

Answer 1

Проблема здесь:

this.router.navigate(['../AppliedCandidates'], {
      relativeTo: this.route});

Поскольку вы используете "../", когда вы используете "../", вы говорите, перейдите к "localhost: 4200 / AppliedCandidates" вместо навигациив 'localhost: 4200 / JobView /: id / AppliedCandidates', как вы хотите.

Если вы хотите перемещаться относительно URL, где вы находитесь в данный момент (localhost: 4200 / JobView /: id) в этомВ этом случае вы должны использовать: «./», что означает: из URL-адреса добавьте этот путь (например, «AppliedCandidates») и перейдите к нему.

В заключение вы должны перейти следующим образом:

this.router.navigate(['./AppliedCandidates'], {
      relativeTo: this.route});

Попробуйте, если это работает.