我使用多个router-outlets来加载我的组件。 外部的router-outlet用于加载大多数基本组件,如登录、主页和404页面。 我使用嵌套的router-outlet来加载主页的子组件。这个router-outlet被嵌套在home.component中。
home.component.html
<app-header></app-header>
<router-outlet name="homeRoute"></router-outlet>
<app-footer></app-footer>
app.module.ts
const appRoutes: Routes = [
{path: '', component: HomeComponent, children: [
{path: '', component: DashboardComponent, outlet: 'homeRouter'},
{path: 'user', component: UserComponent, outlet: 'homeRouter'},
{path: 'user/:id', component: UserdetailComponent, outlet: 'homeRouter'}
]},
{path: 'login', component: LoginformComponent},
{path: '**', component: NotfoundComponent}
];
HomeComponent和LoginformComponent需要从外部router-outlet加载。 Home组件包含名称为“homeRouter”的内部router-outlet,我想使用它来加载主页的子组件。 但是内部路由器的导航不起作用。我尝试使用router.navigate()方法和URL访问每个组件。但是两者都没有按预期工作。
有人能告诉我这段代码有什么问题吗?我检查并尝试了一些关于相同问题的先前问题,但都没有正常工作。
以下是我尝试不同组件的URL:
1. http://localhost:4200 dashboardComponet(这个可以工作) 2. http://localhost:4200/user userComponent(不起作用。路由到notFoundComponent) 3. http://localhost:4200/user/U001 userDetailComponent(不起作用。仍然路由到notFoundComponent)