Angular 6.1.9 вложенная маршрутизация к именованным выходам - ​​ошибка «Не удается сопоставить ни один маршрут» - PullRequest
Новая
       12

Angular 6.1.9 вложенная маршрутизация к именованным выходам - ​​ошибка «Не удается сопоставить ни один маршрут»

0 голосов
/ 03 октября 2018

Я использую Angular 6.1.9 с его модулем маршрутизатора.Мне кажется невозможным маршрутизировать / отображать содержимое названного выхода.

При вызове <a [routerLink]="['', { outlets: { editArea: ['addRootPartner'] } }]">foo</a> происходит сбой с:

NavigationError (id: 2, url: '/ Overview /work / allPartners (editArea: addRootPartner) ', ошибка: ошибка: невозможно сопоставить никакие маршруты. Сегмент URL:' addRootPartner ')

Структура моего приложения: 

app.module
app-routing.module

workspace.module
workspace-routing.module

app-routing : 

const rootAppRoutes: Routes = [
  { path: '',  redirectTo: 'overview', pathMatch: 'full' },
  { path: 'overview', loadChildren: './overview/workplace/workplace.module#WorkplaceModule' },
  { path: '**', component: PageNotFoundComponent }
];

Перенаправляет на overview, который загружает модуль workplace.

маршрутизация на рабочем месте: 

const workplaceRoutes: Routes = [
  { path: '', redirectTo: 'work', pathMatch: 'full'},
  { path: 'work', component: WorkplaceComponent, children: [
    { path: 'allPartners', component: RootPartnersComponent },
    { path: 'childPartners', component: ChildPartnersComponent },
    { path: '', redirectTo: 'allPartners', pathMatch: 'full'}
  ]},
  { path: 'addRootPartner', component: AddRootPartnerComponent, outlet: 'editArea' }
];

Перенаправляет на work, который отображает WorkplaceComponent.Затем он идет дальше к потомку allPartners, который отображает RootPartnersComponent.

. В коде я использую два <router-outlet> s.Один находится внутри компонента app модуля: 

<router-outlet></router-outlet>

Второй находится в модуле workplace, WorkplaceComponent: 

<router-outlet></router-outlet>
<router-outlet name="editArea"></router-outlet>

Что такоене так с этой настройкой?Есть ли техническое ограничение на использование вложенных именованных торговых точек?

1 Ответ

0 голосов
/ 04 октября 2018

Хорошо, после ночи, проведенной с этим беспорядком, я нашел решение.

Во-первых, дочерние маршруты с именованным выходом не работают, если они определены для родителя с path: '' ...

// the root redirect due to named outlets not being able to work as children of "path: ''"
{ path: '', redirectTo: 'work', pathMatch: 'full' },
{ path: 'work', component: WorkplaceComponent, children: [
   { path: '', component: RootPartnersComponent, outlet: 'displayArea' },
   { path: 'childPartners', component: ChildPartnersComponent, outlet: 'displayArea' },
   // child for edit area outlet
   { path: 'addRootPartner/:id', component: AddRootPartnerComponent, outlet: 'editArea' }
]}

https://blog.angular -university.io / angular-2-router-nested-маршруты-и-вложенные-дополнительные-маршруты-строить-меню-навигация-система /

Вторая проблема была связана с роутером.Видимо, вы должны указать свой родительский маршрут в качестве основы навигации.Таким образом, навигация должна выполняться программно. 

this.router.navigate([
  // NOTE: No relative-path navigation is required because we are accessing
  // the parent's "activatedRoute" instance. As such, this will be executed
  // as if we were doing this in the parent view component.
  {
    outlets: {
      editArea: ['addRootPartner']
    }
  }
],
  {
    relativeTo: this.activatedRoute.parent // <--- PARENT activated route.
  }
);

https://www.bennadel.com/blog/3351-closing-secondary-router-outlet-views-from-within-the-named-route-view-components-in-angular-4-4-4.htm

Слишком позднее редактирование:

Проблема с path: '' может быть вызвано настройкой этого маршрута в качестве первого.

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

angular.io / guide / router

...