在 Angular 上处理 'Routes' 个导入模块

Question

我在 understanding/using 导入 module 的 routes 中遇到了一些困难。问题发生在 routes 上，它依赖于 二级网点 或 命名网点 。

问题

假设我有两个模块 entity-a 和 entity-b，并且 entity-a 导入 entity-b，通过 选择器[=104 使用其内容=] app-entity-b 在 entity-a.component.html.

entity-b 的内容将在 entity-a 上完美显示，但是，** entity-b link 引用命名出口的内容已损坏**。

应用测试

stackblitz 上的这个测试应用说明了这个问题。

路由在模块内工作

• 单击 EntityB 打开 entity-b.component。
• 点击实体B详细信息打开entity-b-detail.component。

导入模块后路由中断

• 单击 EntityA 打开 entity-a.component。
• entity-a.componenet 正在导入 entity-b.module 并显示包含 link 到 entity-b-detail.component 的 entity-b.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] 在调用 outlets 之前引用了 entity-b 路径，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

命名出口的路由与其他路由结合使用。当您尝试从 entity-a 导航到 entity-b-detail 时，它会转到路由 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',
      },
    ]
  }
];