我在理解/使用routes
导入的module
. 问题发生在routes
依赖辅助插座或命名插座。
假设我有两个模块entity-a
and entity-b
,并且通过on选择器使用其内容entity-a
导入。entity-b
app-entity-b
entity-a.component.html
的内容entity-b
将完美地显示在 上entity-a
,但是,**entity-b
指向指定出口的链接已损坏**。
stackblitz上的这个测试应用程序说明了这个问题。
entity-b.component
.entity-b-detail.component
.entity-a.component
.entity-a.componenet
正在导入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]
提到了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 中显示结果。由于找不到任何匹配项,因此会引发错误。
我已经分叉了您的代码并在此处进行了更改。
唯一相关的变化是在 上EntityModule
。routeA
必须持有对 path 的引用a/detail
。
entity-a.module
const routeA: Routes = [
{
path: 'a',
component: EntityAComponent,
children: [
{
path: 'detail',
component: EntityBDetailComponent,
outlet: 'details',
},
]
}
];
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句