Angular 组件正在显示，但路由器出口将被忽略

我在app.component.html、admin.component.html和manage-users.component.html中有一个路由器出口。由于某些原因，当我导航到时，manage-users.component.html中的路由器出口没有输出任何内容

文件的结构如下所示：

/Admin (Module)
     admin.component.html (has router-outlet)
     admin.component.ts
     admin.module.ts
     admin-routing.module.ts
     /Manage-Users (Module within Admin module)
          manage-users.component.html (has router-outlet)
          manage-users.component.ts
          manage-users.module.ts
          manage-users-routing.module.ts
          /User-List (just a component to be displayed in manage-users outlet)
          ...
          /User-Detail (just a component to be displayed in manage-users outlet)
          ...

我有3级路线：

    // App Routes (app-routing.module.ts)
    const appRoutes: Routes = [
      { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuard] },
      { path: '',   redirectTo: '/login', pathMatch: 'full' },
      { path: '**', component: PageNotFoundComponent }
    ];

    // Admin Module Routes (admin-routing.module.ts)
    const adminRoutes: Routes = [
      {
        path: '',
        component: AdminComponent,
        children: [
          { path: 'users', component: ManageUsersComponent }
        ]
      }
    ];

    // Admin Module > Manage Users Module Routes (manage-users-routing.module.ts)
const manageUsersRoutes: Routes = [
  {
    path: '',
    component: ManageUsersComponent,
    children: [
      {path: '', component: UserListComponent},
      {path: 'edit/:id', component: UserDetailComponent}
    ]
  }
];

下面是我的ManageUsers.module的外观：

@NgModule({
  declarations: [
    ManageUsersComponent,
    UserListComponent,
    UserDetailComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    ManageUsersRoutingModule
  ],
  providers: [
    UserService
  ]
})
export class ManageUsersModule { }

@NgModule({
  declarations: [
    AdminComponent
  ],
  imports: [
    CommonModule,
    AdminRoutingModule,
    ManageUsersModule
  ]
})
export class AdminModule { }

下面是我的管理模块的样子：

@NgModule({
  declarations: [
    ManageUsersComponent,
    UserListComponent,
    UserDetailComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    ManageUsersRoutingModule
  ],
  providers: [
    UserService
  ]
})
export class ManageUsersModule { }

@NgModule({
  declarations: [
    AdminComponent
  ],
  imports: [
    CommonModule,
    AdminRoutingModule,
    ManageUsersModule
  ]
})
export class AdminModule { }

---

您需要在用户路由内使用

children

属性，以便在路由器出口内加载组件

您设置路由的方式不正确您正在为用户路由使用路由模块，但是您在UserModule外部导入该模块，实际操作是附加到管理模块内部的现有路由

这就是真正发生的事情：

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        children:
        [
           { path: 'users', component: ManageUsersComponent }
        ]
      }
    ]
  },
    ...manageTenantRoutes   // your routes are being added here
];

解决这一问题的一种方法是使用惰性加载，就像使用管理模块一样

如果您想保持这种方式，那么您必须准确地告诉这些路由应该附加到哪里

有关更新，请参阅stackblitz

但您必须这样添加它：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { ManageUsersComponent } from './manage-users/manage-users.component';

import { manageTenantRoutes } from './manage-users/manage-users-routing.module'
const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        children:
        [
          ...manageTenantRoutes
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

并改变你的路线以反映这一变化

export const manageTenantRoutes: Routes = [
  {
    path: 'users',
    component: ManageUsersComponent,
    children: [
      {path: '', component: UserListComponent},
      {path: 'edit/:id', component: UserDetailComponent}
    ]
  }
];

---

希望这能把事情弄清楚

好建议，但仍然不起作用。请查看我的更新，并告诉我这是否是您所说的。manageUsersRoutes的模块在哪里？你能展示一下吗？我在帖子的底部添加了这两个模块。我知道我在module.ts中导入AdminRoutingModule和ManageUsersModule之间的顺序很重要，但顺序是否对其他任何内容都很重要？我认为您不需要在管理路径中导入第二个孩子。把用户的路线从内部的childrenTook之外走了这么长时间，但它终于点击了。当您导入的模块中导入了路由模块时，这些路由将在外部级别添加。我现在明白了，只要在我想要加载的地方进行延迟加载，延迟加载可以让你摆脱这种混乱。我还看到，在某些情况下，如果导入的模块中包含路由模块，并且路由可以位于外部级别，那么导入该模块并不重要。有点像在这里导入联系人模块的方式：