我使用多个router-oulets来加载我的组件.外部路由器插座用于加载大多数基本组件,如login,home,404.我使用嵌套路由器插座来加载主页的子组件.router-outlet嵌套在home.component中.
home.component.html
<app-header></app-header>
<router-outlet name="homeRoute"></router-outlet>
<app-footer></app-footer>
Run Code Online (Sandbox Code Playgroud)
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}
];
Run Code Online (Sandbox Code Playgroud)
HomeComponent和LoginformComponent需要从外部路由器插座加载.Home组件包含名为'homeRouter'的内部路由器插座,我想用它来加载主页的子组件.但内部路由器的导航不起作用.我尝试使用router.navigate()方法并使用URL访问每个组件.但他们两个都没有按预期工作.
有人能告诉我这段代码有什么问题.我检查并尝试过几个关于同一问题的问题,但没有一个工作正常.
以下是我为不同组件尝试的URL
http://localhost:4200 dashboardComponet(这个有效)http://localhost:4200/user userComponent(不起作用.路由到notFoundComponent)http://localhost:4200/user/U001 userDetailComponent(doenst work.still route to notFoundComponent)