Angular 8 嵌套路由和多个路由器插座不起作用

Question

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

当我转到 /logs 时，我没有错误，但屏幕上没有显示任何内容。

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

我尝试了很多在互联网上找到的不同解决方案，但没有任何效果。我错过了什么？

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

/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

/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-routing.module.ts

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

应用程序组件.html

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 { }

日志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 { }

日志页面.component.ts

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

Answer 1

解决方案1

尝试不使用指定的路由器插座。您使用命名插座有什么具体原因吗？有一个已知的错误，表明延迟加载和命名出口不能很好地协同工作

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

解决方案2

如果命名路由器出口是唯一的方法，那么这里还有另一个可能适合您的答案。详细解决方案请看这里