为什么Angular 8延迟加载会导致此元素重定向并将其自身两次嵌入路由器出口？

Question

我最近第一次对Angular 8应用进行了模块化，这很容易，但是当我开始实现延迟加载时，路由就开始发生奇怪的事情。这是主要问题：

而不是嵌入概述组件以及仪表板（导航栏和所有控件），它应该打开所选组件（在此示例中为用户）。

这是我的延迟加载代码：

app.routes.ts

export const ROUTES: Routes = [
  {
    path: 'dashboard',
    component: LayoutComponent,
    canActivate: [OktaAuthGuard],
    canActivateChild: [CanActivateRoute],
    children: [
      {
        path: 'overview',
        component: OverviewComponent,
        data: { title: 'Overview', requiredRoles: [Role.SALESPERSON] }
      },
      {
        path: 'users',
        loadChildren: () =>
          import('./dashboard/users/users.module').then(m => m.UsersModule),
        data: { title: 'Users', requiredRoles: [Role.SALES_ADMIN] }
      },
      {
        path: 'online-orders',
        loadChildren: () =>
          import('./dashboard/online-orders/online-orders.module').then(
            m => m.OnlineOrdersModule
          ),
        data: {
          title: 'Online Orders',
          requiredRoles: [Role.SALES_ADMIN]
        }
      },
      {
        path: 'salesperson',
        loadChildren: () =>
          import('./dashboard/salesperson/salesperson.module').then(
            m => m.SalespersonModule
          ),
        data: {
          title: 'Salesperson',
          requiredRoles: [Role.SALESPERSON]
        }
      }
    ]
  },
  {
    path: 'dashboard/unauthorized',
    component: UnauthorizedComponent,
    data: { title: 'Unauthorized' }
  },
  { path: 'implicit/callback', component: OktaCallbackComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard/error',
    component: ErrorComponent,
    data: { title: 'Error' }
  },
  { path: '**', redirectTo: 'dashboard/overview' }
];

根据我在使用enableTracing的控制台中得到的信息判断，主要问题之一是它正在被重定向，而不是直接转到正确的组件：

RoutesRecognized {
    id: 4, 
    url: "/dashboard/users", 
    urlAfterRedirects: "/dashboard/users/dashboard/overview/", 
    state: RouterStateSnapshot
}

如您所见，它不只是导航到/dashboard/users，而是在末尾添加第二个/dashboard/并在其上重定向到/overview/。

我猜它与应用程序中具有多个路由器插座有关，但是在实现延迟加载之前，这种方法可以正常工作。

app.component.html

<div class="app-content">
    <router-outlet></router-outlet>
</div>

layout.component.html

<div class="app-content">
    <mat-sidenav-container>
    <mat-sidenav mode="side" opened="true">
        <app-nav-menu></app-nav-menu>
    </mat-sidenav>
    <app-top-menu></app-top-menu>
    <section>
        <router-outlet></router-outlet> //<----
    </section>
    </mat-sidenav-container>
</div>

我做错了什么？我已经尝试过：

• 延迟加载概述组件（打开页面会产生无限循环）
• 重命名路由器出口之一（中断路由并在控制台中引发错误）

我是一名初级开发人员，我仍在学习Angular应用如何组合在一起（尤其是通过路由），因此希望有人可以帮助我了解我可能忽略的内容。我见过与此类似的问题，但是没有一个组件像这样嵌入自身的问题。

Answer 1

我相信问题是您的AppComponent.html具有路由器出口，而不在路线内使用应用程序组件。因此，主应用程序最终位于其中。如果您检查html，您将看到该应用程序位于其中：

<div class="app-content">
    <router-outlet></router-outlet>
</div>

以及内部：

<section>
        <router-outlet></router-outlet> //<----
    </section>

不过不确定如何解决。您可以尝试两种之一。删除app.component.html中的路由器出口，或进行以下测试：

export const ROUTES: Routes = [
{
  path: '',
 component: AppComponent,
children: [

  {
    path: 'dashboard',
    component: LayoutComponent,
    canActivate: [OktaAuthGuard],
    canActivateChild: [CanActivateRoute],
    children: [

等这可能需要一些调整才能生效。但这通常是您要执行的操作，在顶层具有路径”，然后作为子级指定路径。

如果这不起作用，请检查您的html并报告您在html中看到的内容，这是一个非常有用的工具，可以帮助调试我是否怀疑不是上述情况。