处理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上的这个测试应用程序说明了这个问题。

Routes are working within the module

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

Routes are broken once the module is imported

• 单击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路径，则会向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)，并在命名的outlet中显示结果。由于它没有找到任何匹配项，因此会抛出错误。

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

唯一相关的变化是在EntityModule。 routeA必须持有路径a/detail的参考。

entity-a.module

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