在Angular上处理导入模块的“路线”

Question

我在理解/使用导入的routes的{​​{1}}时遇到了一些困难。该问题发生在依靠次要商店或命名商店的module上。

问题

假设我有两个模块routes和entity-a，并且entity-b通过{em>选择器 {{1 }}在entity-a上。

entity-b的内容将在app-entity-b上完美显示，但是，** entity-a.component.html指向命名出口的链接已损坏**。

应用测试

此stackblitz上的测试应用程序说明了此问题。

路由在模块内正常工作

• 点击 EntityB 以打开entity-b。
• 点击实体B详细信息以打开entity-a。

导入模块后路由中断

• 点击 EntityA 以打开entity-b。
• entity-b.component正在导入entity-b-detail.component并显示entity-a.component，其中包含指向entity-a.componenet的链接。
• 点击实体B详细信息并收到错误消息：
  • entity-b.module

要考虑的事情

• 模块entity-b.component和entity-b-detail.component正在延迟加载。
• Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'entity-a/a'正在导入组件entity-a，并使用其选择器来显示其内容。
• 如果entity-b在调用entity-a之前引用了entity-b路径，则[routerLink]组件将发生 redirect ，显示{{1 }}。但是，这不是预期的行为。

相关代码部分

entity-b

outlets

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>

Answer 1

命名出口的路由与其他路由结合使用。当您尝试从实体-a导航到实体-b-详细信息时，它会转到路线entity-a/a/(details:detail)，并在命名的插座中显示结果。由于找不到任何匹配项，因此会引发错误。

我已分叉您的代码并进行了更改here。

唯一相关的更改是在EntityModule上。 routeA必须包含路径a/detail的引用。

entity-a.module

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