Обработка «маршрутов» импортируемых модулей на Angular

Question

У меня возникли некоторые трудности в понимании / использовании routes импортированного module.Проблема возникает на routes, которые зависят от вторичных розеток или именованных розеток .

Проблема

Предположим, у меня есть два модуля entity-aи entity-b, и entity-a импортирует entity-b, используя его содержимое с помощью селектора app-entity-b на entity-a.component.html.

Содержимое entity-b будет отображаться идеальнооднако на entity-a ** entity-b ссылки, относящиеся к именованным выходам, прервались **.

Тест приложения

Это тестовое приложение на stackblitz иллюстрируетпроблема.

В модуле работают маршруты

• Нажмите EntityB , чтобы открыть entity-b.component.
• Нажмите EntityB детали для открытия entity-b-detail.component.

Маршруты прерываются после импорта модуля

• Нажмите EntityA , чтобы открыть entity-a.component.
• entity-a.componenet импортирует entity-b.module и показывает entity-b.component, который содержит ссылку на entity-b-detail.component.
• Нажмите Сведения об объекте B и получитеошибка:
  • Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'entity-a/a'

Что следует учитывать

• Модули entity-a и entity-b загружаются лениво.
• entity-a импортирует компонент entity-b и использует его селектор для отображения его содержимого.
• Если [routerLink] ссылается на путь entity-b перед вызовомперенаправление outlets a происходит на компонент entity-b, показывая detail.Однако это не ожидаемое поведение.

Соответствующие части кода

app.module

const appRoutes: Routes = [
  {
    path: '',
    component: MainComponent
  }
];

const childRoutes: Routes = [
  {
    path: 'entity-a',
    loadChildren: './entities/entity-a/entity-a.module#EntityAModule'
  },
  {
    path: 'entity-b',
    loadChildren: './entities/entity-b/entity-b.module#EntityBModule'
  },
];

const ROUTES = [...childRoutes, ...appRoutes];
@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    RouterModule.forChild(childRoutes)
    ],
  declarations: [ AppComponent, MainComponent, NavComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

entity-a.module

const routeA: Routes = [
  {
    path: 'a',
    component: EntityAComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    EntityBModule,
    RouterModule.forChild(routeA)
  ],
  declarations: [EntityAComponent],
  exports: [EntityAComponent]
})
export class EntityAModule { }

entity-a.component.html

<h3>Entity A</h3>
<p>
Entity A Content
</p>

<div>
  <em>Importing 'Entity B'</em>
  <app-entity-b></app-entity-b>
</div>

entity-b.module

const routes: Routes = [
  { 
    path: 'b',
    component: EntityBComponent,
    children: [
      {
        path: 'detail',
        component: EntityBDetailComponent,
        outlet: 'details',
      },
    ]
  },

];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    CommonModule
  ],
  declarations: [
    EntityBComponent,
    EntityBDetailComponent
  ],
  exports: [
    EntityBComponent,
    EntityBDetailComponent
  ]
})
export class EntityBModule { }

entity-b.component.html

<h3>Entity B</h3>
<ul>
<li><a [routerLink]="[ { outlets: { details: 'detail' } }]">
  Entity B details
</a></li>
</ul>
<router-outlet name="details"></router-outlet>

Answer 1

Маршрутизация для именованных торговых точек работает в сочетании с другими маршрутами. Когда вы пытаетесь перейти к объекту-b-detail из объекта-a, он идет по маршруту entity-a/a/(details:detail) и отображает результат в именованном выходе. Поскольку он не находит соответствия, он выдает ошибку.

Я разбудил ваш код и внес изменения здесь .

Единственное соответствующее изменение было на EntityModule. routeA должен содержать ссылку на путь a/detail.

entity-a.module

const routeA: Routes = [
  {
    path: 'a',
    component: EntityAComponent,
     children: [
      {
        path: 'detail',
        component: EntityBDetailComponent,
        outlet: 'details',
      },
    ]
  }
];