Angular2 在不拆除第一个组件的情况下从一个组件导航到同级组件

Question

我刚开始学习 Angular2，我想构建一个非常常见的 "list-detail" 样式页面，类似于： http://xgrommx.github.io/rx-book/index.html 。当您单击左侧栏中的项目时，它会启动导航到中心详细信息视图，而不会拆除左侧栏。达到这种效果的最佳方法是什么？

我目前的设计是这样的：

当我启动 home 组件时，列表组件 (child1) 将立即加载并调用外部 API 来获取项目列表的名称（仅名称）。单击左侧的项目名称时，将创建一个新的 Detail-component。详细信息组件在其 ngOnInit 方法中获取项目详细信息。我试过使用辅助路由将两个子组件嵌套在同一页面上，但似乎不起作用。我的家庭路线如下所示：

export const HomeRoutes: RouterConfig = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: ListComponent
      },
      {
        path: ':item',
        component: DetailComponent
        outlet: 'detail'
      }
    ]
  }
];

在我的 home.component.ts 中，我只有这个：

  <h2>Home</h2>

  <router-outlet></router-outlet>

  <router-outlet name="detail"></router-outlet>

我导航到详细视图的方式是在列表组件中调用 navigate()，如下所示：

onSelect(item : string) {
    this.router.navigate(['/detail', item]);
  }

但是每次我单击任何项目时，详细视图都不会显示，并且会显示如下错误：

Error: Uncaught (in promise): Error: Cannot match any routes: 'home/item'
.

我使用辅助路线是否正确，有没有更好的方法来实现此功能？

Answer 1

当前的路由器版本在使用 routerLink 和 navigate 方法导航到辅助插座时存在一些问题。您应该构建完整的 URL 并使用 navigateByUrl。

this.router.navigateByUrl('/home/(list//detail:detail)

与 example 打交道。单击详细信息按钮，然后单击管理。 Admin 在 admin outlet 中路由。全屏打开可以看到 URL 队形。

URL 具有以下语义

子路径由 /
如果一个路径有兄弟姐妹，那么它应该用括号括起来
兄弟姐妹被//
出口和路径分隔：

Parent/child/(gchild1//出口名称:gchild2)

另一个这样

Angular2 在不拆除第一个组件的情况下从一个组件导航到同级组件

Angular2 navigate from a component to a sibling component without tearing down the first

html

angularjs

angular-routing

angular