Angular 7 маршрутов (Подробнее) - PullRequest
0 голосов
/ 08 июля 2020

Я пытаюсь извлечь идентификатор из URL-адреса, используя Angular 7 в дочернем модуле:

const routes: Routes = [
  {
    path: 'filter',
    component: FilterComponent
  },
  {
    path: 'filter-edit/:filterId',
    component: FilterDetailComponent
  },
  {
    path: 'criteria-source-data',
    component: CriteriaSourceDataComponent
  },
  {
    path: '**',
    component: FilterComponent
  },
];

@NgModule({
  imports: [
    PplcommonModule,
    BrowserModule,
    NgbModule,
    ReactiveFormsModule,
    MatSlideToggleModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes),
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  exports: [
    RouterModule,
    MatSlideToggleModule
  ],
  declarations: [FilterComponent, FilterDetailComponent, CriteriaSourceDataComponent]
})
export class FilterModule { }

В одном компоненте этого модуля я делаю это:

openFilter(item) {
   this.router.navigateByUrl(`/filter-edit/${item.filterId}`);
}

В компонент, из которого мне нужно извлечь идентификатор:

  loadCurrentFilter() {
    this.route.paramMap.pipe(map(paramsMap => paramsMap.get('filterId'))).subscribe(id => {
      this.filterService.getFilterById(id).subscribe(res => {
          this.filterService.currentFilter = res;
      }, err => {
          console.error(err);
          this.alertService.showAlert('danger', 'Error while loading filter data.');
      });
    });
  }
http://localhost:8080/prism/ppl/rulesfilter#/filter-edit/233

До этого момента все работает нормально, я извлекаю идентификатор и получаю все необходимые данные.

Но когда я перезапускаю страница в браузере, переходящая на другую страницу компонента (FilterComponent).

Я реализовал очень похожую страницу в другом проекте, с той лишь разницей, что она была в модуле root (был только один модуль).

Я подумал, если перезапущу страницу в браузере здесь

http://localhost:8080/prism/ppl/rulesfilter#/filter-edit/233

Этот маршрут в дочернем модуле должен забрать:

  {
    path: 'filter-edit/:filterId',
    component: FilterDetailComponent
  },

Что я здесь делаю не так? Пожалуйста помоги. При необходимости могу дать более подробную информацию в комментариях. Спасибо!

...