Angular 4个带有辅助路由的功能模块

Question

我已经盯着这个看了几个小时了，我似乎无法理解我做错了什么。这是我的场景：我有一个 Angular 4 应用程序，它有一个主模块和一个管理模块，我正在懒惰地加载它们。我想在管理组件的模板中定义另一个路由器，我可以在其中加载管理功能的所有辅助路由。

这是我的 app.module 路由配置：

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    {
        path: 'dashboard', component: DashboardComponent, canActivate: [CanActivateGuard]
    },
    { path: 'admin', loadChildren: '/app/components/admin/admin.module#AdminModule', canActivate: [AdminGuard] },
    { path: '**', redirectTo: 'dashboard' }
];

和 admin.module:

const routes: Routes = [
    {
        path: '', component: AdminDashboardComponent, children: [
            { path: 'employees', component: EmployeeManagerComponent, outlet: 'admin' }
        ]
    }
]

在 adminDashboard.html 中，我将命名路由器定义为：

<router-outlet name="admin"></router-outlet>

我还有一个 link 定义为：

<a [routerLink]="[{ outlets: { 'admin': ['employees']}}]">Employee Manager</a>

当我导航到管理仪表板时，加载了模块并显示了仪表板。当我单击 link 将 EmployeeManagerComponent 加载到指定的路由器时，没有任何反应。 url 更改为 localhost:5000/admin/(admin:employees)，但不显示 EmployeeManagerComponent。控制台中没有记录错误。

我遗漏了一些东西，但我不知道是什么。

感谢您的帮助。

Answer 1

所以，经过反复试验，我发现我不需要在延迟加载的 adminDashboard 组件中命名 router-outlet。看来Angular聪明到可以判断出模块中的子路由会被放置在离模块中主组件最近的outlet中。

所以，只需删除名称并将链接设置为

<a [routerLink]="['employees']">Employees</a>

成功了。

Angular 4个带有辅助路由的功能模块

Angular 4 features module with auxiliary routes

angular-routing

angular