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

Posted 2023-02-22

【中文标题】Angular 8嵌套路由和多个路由器插座不起作用

【英文标题】：Angular 8 Nested routes and multiple router outlet doesn't work

【发布时间】：2020-03-16 04:36:33

【问题描述】：

我现在有一个简单的 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

@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>

【问题讨论】：

第一个 router-outlet 在 app.component.html 中。第二个是log-page.component.ts

【参考方案1】：

解决方案 1

尝试不使用命名的路由器插座。您使用命名插座有什么具体原因吗？有一个已知的错误that says that lazy loading and named outlets don't work well together

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

解决方案 2

如果命名路由器插座是唯一的方法，那么这里还有另一个可能对您有用的答案。 Check detailed solution here

【参考方案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/”

【讨论】：

检查下面的解决方案。有两种处理方式。