Question

因此，我遇到了著名的角度路由问题"named outlet with lazy loaded module"。这个问题似乎已经解决，并且this guy provided a plunker提供了我一直关注的有效解决方案。但是我仍然遇到错误，无法理解此问题的性质

错误：无法匹配任何路由。网址段：

我尝试使用pathMatch：“ full”，并具有指向不同组件的不同重定向路由，但最终始终会出现相同的错误。

我已经困了几个小时，这就是为什么决定在这里提问。我的问题在哪里，我在想什么？

我的设置

app.routing.ts：

 const routes: Routes = [
      {
        path: '',
        loadChildren: 'app/home/home.module#HomeModule',
      },
      {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
      },
      {
        path: 'data',
        loadChildren: 'app/data/data.module#DataModule',
      },
      {
        path: '**',
        redirectTo: ''
      }
    ];

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

data.routing-module.ts

    const routes: Routes = [
  {
    path: 'summary',
    component: SummaryComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'management/:id',
    component: DataComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'activities',
        component: ActivitiesComponent,
        outlet: 'activities',
      },
      {
        path: 'researches',
        component: ResearchesComponent,
        outlet: 'researches',
      }
    ]
  },
  {
    path: 'review/:id',
    component: InfoComponent,
    canActivate: [AuthGuard],
  },
];

data.component.html

<mat-drawer-container class="docs-viewer-container">

  <mat-drawer position='start' [mode]='mode'>
    <router-outlet name="activities"></router-outlet>
  </mat-drawer>

  <mat-drawer position='end' [mode]='mode'>
    <router-outlet name="researches"></router-outlet>
  </mat-drawer>

  <mat-drawer-content>
    ... 
     // content
    ...
  </mat-drawer-content>

</mat-drawer-container>

因此，用户单击链接导航URL路径后，数据模块的登录页面即为摘要组件：'path/data/summary?params'。 Summary.component具有导航功能

  onActivitySelection(event) {

    this.queryParams.offset = 0;
    this.queryParams.limit = 25

    this.router.navigate([{
        outlets: {
          'activities': '/data/management/' + event.id + '/activities'
        }
      }],
      {
        queryParams: this.queryParams
      })
  }

如您所见，重定向路由必须为'/ data / management /：id / activities'。但是错误表明无法找到此路线。

那么有人可以帮助我解决我的问题吗？

Answer 1

尝试将模块的路由容纳在索引组件中。您有用于应用程序模块的路由器插座，但没有其下任何一层。

对于数据模块的路由：

{
    path: '', component: DataIndexComponent, canActivate: [AuthGuard],
    children: [
      {
       path: 'summary',
       component: SummaryComponent
      },
      ...[restOfRoutes]
      ]
}

在DataIndexComponent中添加<router-outlet></router-outlet>。

另一方面，如果您使用相同的身份验证保护，则可以将其放置在模块的索引级别。

Answer 2

这是可行的解决方案

data.routing-module.ts：

const routes: Routes = [
  {
    path: '',
    component: ViewComponent,
    canActivate: [AuthGuard, DivisionGuard, AreaGuard],
    children: [
      {
        path: 'summary',
        component: SummaryComponent,
      },
      {
        path: 'management/:id',
        component: DataComponent,
        children: [
          {
            path: 'activities',
            component: ActivitiesComponent,
            outlet: 'panel',
          },
          {
            path: 'researches',
            component: ResearchesComponent,
            outlet: 'panel',
          }
        ]
      },
      {
        path: 'review/:id',
        component: InfoComponent,
      },
    ]
  }
];

view.component.html

<router-outlet></router-outlet>

data.component.html

<router-outlet name='activities'></router-outlet>

summary.component.ts中改进的导航功能

 oActivitySelection(event) {

    this.queryParams.offset = 0;
    this.queryParams.limit = 25;

    this.router.navigate(['/data/management/' + event.id, {
        outlets: {
          panel: 'activities'
        }
      }],
      {
        queryParams: this.queryParams
      })
  }

最后，URL看起来像：/data/management/272/(panel:activities)

Angular 7，命名路由器出口在延迟加载的模块中不起作用

2 个答案: