在配置我的路线时,似乎我需要一个“虚拟”组件来实现我想要的路径。通常需要一个虚拟组件,还是我忽略了某些东西?详细信息如下:
我想要我的应用程序中的以下路径:
/admin Admin Home Page (admin-home.component)
/admin/users Admin Users Page (admin-users.component)
/admin/messages Admin Messages Page (admin-messages.component)
我最初的尝试:
app.component.html
...
<router-outlet></router-outlet>
...
app.routing.ts
const routes: Routes = [
{
path: '',
redirectTo: 'admin',
pathMatch: 'full'
},
{
path: 'admin',
component: AdminHomeComponent,
children: [
{
path: 'users',
component: AdminUsersComponent
},
{
path: 'messages',
component: AdminMessagesComponent
}
]
}
];
结果是,无论路径如何,都仅显示AdminHomeComponent中的内容。通过Angular docs&SO搜索,我发现父组件中是必需的,因此我添加了它:
admin-home.component.html
...
<router-outlet></router-outlet>
...
正如预期的那样,现在子组件将基于路径显示,但是还会显示admin-home.component.html中的内容,因此是内容的混合。
我能使它起作用的唯一方法是用路由器出口创建一个虚拟组件并相应地调整我的路线:
admin-dummy.component.html:
<router-outlet></router-outlet>
修订后的 app.routing.ts
const routes: Routes = [
{
path: '',
redirectTo: 'admin/home',
pathMatch: 'full'
},
{
path: 'admin',
redirectTo: 'admin/home',
pathMatch: 'full'
},
{
path: 'admin',
component: AdminDummyComponent,
children: [
{
path: 'home',
component: AdminHomeComponent
},
{
path: 'users',
component: AdminUsersComponent
},
{
path: 'messages',
component: AdminMessagesComponent
}
]
}
];
现在,所有子组件路由都通过虚拟组件路由器出口进行路由。 ''和'admin'现在将重定向路由到'home'路径。
这(使用虚拟组件)是实现所需路径的正确方法吗?
非常感谢您的帮助。