Question

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

这是我的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>

我也有一个定义为：

的链接

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

当我导航到管理仪表板时，模块已加载并显示仪表板。当我点击链接将EmployeeManagerComponent加载到指定的路由器时，没有任何反应。该URL更改为localhost：5000 / admin /（admin：employees），但不显示EmployeeManagerComponent。控制台中没有记录错误。

我遗失了一些东西，但我无法弄清楚是什么。

感谢您的帮助。

Answer 1

因此，经过一些反复试验后，我发现我不需要在延迟加载的adminDashboard组件中命名路由器插座。似乎Angular足够聪明，可以确定模块中的子路径将放置在最靠近模块主要组件的插座中。

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

即可

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

做了这个伎俩。

Angular 4功能模块带有辅助路径

1 个答案: