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

锡梅加利

我在理解/使用routes导入的module. 问题发生在routes依赖辅助插座命名插座

问题

假设我有两个模块entity-aand entity-b,并且通过on选择器使用其内容entity-a导入entity-b app-entity-bentity-a.component.html

的内容entity-b将完美地显示在 上entity-a,但是,**entity-b指向指定出口的链接已损坏**。

应用测试

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

路由在模块内工作

  • 单击EntityB以打开entity-b.component.
  • 单击实体 B 详细信息以打开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-aentity-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>
萨钦·古普塔

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

我已经分叉了您的代码并在此处进行了更改

唯一相关的变化是在 上EntityModulerouteA必须持有对 path 的引用a/detail

entity-a.module

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章