小编LSa*_*ath的帖子

使用角度为4的嵌套路由器插座

我使用多个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

  1. http://localhost:4200 dashboardComponet(这个有效)
  2. http://localhost:4200/user userComponent(不起作用.路由到notFoundComponent)
  3. http://localhost:4200/user/U001 userDetailComponent(doenst work.still route to notFoundComponent)

nested-routes angular2-routing router-outlet angular

8
推荐指数
1
解决办法
8456
查看次数