Question

我定义主要router-outlet以在两个组件之间导航：HomeComponent和ContactComponent。但是在HomeComponent我希望第二个router-outlet（完全在他的孩子身上）在EventListComponent和UserEventListComponent之间导航。

我做了这样的事情：

const routes: Routes = [
  {
    path: '', component: HomeComponent,
    children: [
      { path: '', component: RightMenuComponent, outlet:'child', children: [
      { path: '', component: EventListComponent },
      { path: 'mylist', component: UserEventListComponent }
    ]}]
  },
  { path: 'contact', component: ContactComponent },
  { path: '**', component: Page404Component }
];

但它没有用。如果我删除outlet:'child'，则重复我EventListComponent或UserEventListComponent取决于网址。

任何想法如何改善这个？

Answer 1

我认为你应该改变它：

[
{
  "path": "",
  "component": "HomeComponent",
  "children": [
    {
      "path": "eventList",
      "component": "EventListComponent"
    },
    {
      "path": "mylist",
      "component": "UserEventListComponent"
    }
  ]
},
{
  "path": "contact",
  "component": "ContactComponent"
},
{
  "path": " **",
  "component": "Page404Component"
}

RightMenuComponent应该是HomeComponent中的一个组件，我的意思是，不是路由子，只是一个HomeComponent的孩子。

我希望可以提供帮助

Answer 2

按照您设置的方式，您需要三个路由器插座。

1，在应用级别为Home，Contact，404注入应用程序。
第二，在HomeMenu的Home里面注入Home。
3，在RightMenu中为Event和UserEvent注入Right内部菜单。

从它的外观来看，你可能会发现将例如唯一的孩子注射到Home Compoenent而不是将它们组合在一起是多余的。

如何使用子路由器插座导航beetwen组件

2 个答案: