Angular 8嵌套路由和多个路由器出口不起作用

Question

我现在有一个简单的angular 8.3应用程序，但路由不起作用。

当我进入/ logs时，我没有任何错误，但是屏幕上没有任何显示。

当我转到/ logs / detailed / 1036时，控制台中出现错误：“错误：无法匹配任何路由。URL段：'logs / detailed / 1036'”

我尝试了很多在Internet上找到的差异解决方案，但是没有任何效果。我想念什么？

这是我的应用程序的一棵简单的树：

/app
- app.module.ts
- app-routing.module.ts
- app.component.html
      /log-page
      - log-page.module.ts
      - log-page-routing.module.ts
      - log-page.component.html

app.module.ts

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule,
      AppRoutingModule,
      SharedModule,
      LogPageModule,
      ToastrModule.forRoot(),
      TabMenuModule
   ],
   providers: [],
   bootstrap: [
      AppComponent,
   ]
})
export class AppModule { }

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'logs', pathMatch: 'full'},
  { path: 'logs',  loadChildren: () => import(`./log-page/log-page.module`).then(m => m.LogPageModule)},
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<app-header></app-header>
<p-tabMenu [model]="navigationItems"></p-tabMenu>
<router-outlet></router-outlet>

log-page.module.ts

@NgModule({
  imports: [
    CommonModule,
    SpinnerModule,
    MenuModule,
    FormsModule,
    ButtonModule,
    TableModule,
    InputTextModule,
    SharedModule,
    LogPageRoutingModule
  ],
  declarations: [
    LogPageComponent,
    FilterBarComponent,
    LogTableComponent,
    DetailedLogComponent,
    ErrorStatusComponent
],
  providers: [
    FilterSettingsService
  ]
})
export class LogPageModule { }

log-page-routing.module.ts

const routes: Routes = [
    {
        path: '', outlet: 'log-page', component: LogTableComponent, children: [
            {
                path: 'detailed/:logId', outlet: 'log-page', component: DetailedLogComponent
            }, {
                path: '**', redirectTo: '', pathMatch: 'full'
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class LogPageRoutingModule { }

log-page.component.ts

<div class="p-grid ">
    <div class="p-col-fixed" style="width: 200px;">
        <app-error-status></app-error-status>
    </div>
    <div class="p-col">
        <router-outlet name="log-page"></router-outlet>
    </div>
</div>

Answer 1

解决方案1 ​​

在没有命名路由器插座的情况下尝试。您使用命名插座有任何特定原因吗？有一个已知的错误that says that lazy loading and named outlets don't work well together

您不需要命名插座即可嵌套路由器插座。仅当它们在同一组件中并且您实际上希望在同一位置公开两个不同的组件时，才需要它们，而一个组件不是另一个组件的子组件。

解决方案2

如果唯一的选择是路由器出口，那么这里还有一个答案可能对您有用。 Check detailed solution here

Answer 2

我进行了一些更改，并且效果更好，但是仍然存在问题。

这是我的app-routing.module.ts =

{ path: '', redirectTo: 'logs', pathMatch: 'full'},
{ path: 'logs', component: LogPageComponent , loadChildren: () => import(`./log-page/log-page.module`).then(m => m.LogPageModule)}

这是我的log-page-routing.module.ts

{ path: '', outlet: 'log-page', component: LogTableComponent },
{ path: 'detailed', outlet: 'log-page', component: DetailedLogComponent }

我能够正确地播种日志，但是当我转到日志/详细信息时，仍然会出现此错误：“错误：无法匹配任何路由。URL段：'logs / detailed /”