命名路由器插座和延迟加载模块 [英] Named router outlet and lazy loaded modules

问题描述

我对命名路由器插座和延迟加载模块有问题。 我有2个路由器插座，第一个没有名称，第二个命名为mainapp。

app.Component.html

<router-outlet></router-outlet>

app.main.component.html

<router-outlet name="mainapp"></router-outlet>

app.routes.ts

export const routes: Routes = [
    {path: 'login',  component: LoginComponent},
    {path: 'app', component: AppMainComponent, children:[
        {path: '', loadChildren: 'app/client/client.module#ClientModule'}
    ]}
];

client.module e.ts

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild([
      {path: 'client', component: ClientListComponent, outlet: "mainapp" },
      {path: 'client/:id', component: ClientComponent, outlet: "mainapp" }
    ])
  ],
  declarations: [ClientListComponent, ClientComponent],
  exports: [ClientListComponent, ClientComponent]
})
export class ClientModule { }

1. LoginComponent已加载到路由器插座
2. 登录后，AppMainComponent被加载到路由器插座
3. 现在我尝试将ClientComponent加载到指定的路由器插座mainapp

我收到错误

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'app'
Error: Cannot match any routes. URL Segment: 'app

当我为此修改路由时，它起作用了：

export const routes: Routes = [
    {path: 'login',  component: LoginComponent},
    {path: 'app', component: AppMainComponent, children:[
        {path: 'client', component: ClientListComponent, outlet: "mainapp" },
        {path: 'client/:id', component: ClientComponent, outlet: "mainapp" }
    ]}
];

推荐答案

似乎是已知错误，您可以在以下位置进行跟踪： https://github.com/angular/angular/issues/10981

这篇关于命名路由器插座和延迟加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！