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

本文介绍了Angular 8嵌套路由和多个路由器出口不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I have a simple angular 8.3 application for now but the routing does not work.

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

When I go to /logs I have no errors but nothing is displayed to the screen.

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

When I go to /logs/detailed/1036 there is an error in the console : "Error: Cannot match any routes. URL Segment: 'logs/detailed/1036'"

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

I tried a lot of differents solution that I found on internet but nothing works. What am I missing ?

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

Here is a simple tree of my application :

/app - app.module.ts - app-routing.module.ts - appponent.html /log-page - log-page.module.ts - log-page-routing.module.ts - log-pageponent.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 { }

appponent.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-pageponent.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>

推荐答案

解决方案1 ​​

在没有命名路由器插座的情况下尝试.您使用命名插座有任何特定原因吗? 有一个已知的错误，它表示延迟加载和命名出口不能很好地协同工作

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

You don't need a named outlet to have nested router outlets. You only need them if they are in the same component and you want to practically expose two different components in the same place, without one being the child of the other.

如果唯一的选择是路由器出口，那么这里还有一个答案可能对您有用. 在此处查看详细的解决方案

If named router outlet is the only way to go, there is another answer here that might work for you. Check detailed solution here