Angular2从组件导航到同级组件，而无需拆除第一个 [英] Angular2 navigate from a component to a sibling component without tearing down the first

问题描述

我刚刚开始学习Angular2，并且我想构建一个非常常见的列表详细信息"样式页面，类似于以下内容:

I've just started learning Angular2 and I want to build a very common "list-detail" style page similar to this: http://xgrommx.github.io/rx-book/index.html . When you click an item in left-bar it initiates a navigation to the center detail view without tearing down the left-bar. What's the best way to achieve this effect?

我当前的设计如下:

My current design is like the following:

当我启动home组件时，列表组件(child1)将立即加载，它将调用外部API来获取项目列表的名称(仅名称).单击左侧的项目名称时，它将创建一个新的详细信息"组件. detail组件在其ngOnInit方法中获取项目详细信息.我尝试使用辅助路线将两个子组件嵌套在同一页面上，但似乎不起作用.我的回家路线看起来像这样:

When I start the home component, the list component(child1) will load immediately and it will call an external API to fetch the names (only names) of a list of items. When clicking a item name on the left, it will create a new Detail-component. The detail component fetch item detail in its ngOnInit method. I've tried using auxiliary routes to nest the two child components on the same page but it does not seem to work. My home routes look like this:

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中，我只是这样:

And in my home.component.ts I simply have this:

  <h2>Home</h2>

  <router-outlet></router-outlet>

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

我导航到详细视图的方式是在列表组件中像下面这样调用Navigation():

And the way I navigate to the detail view is calling navigate() in the list-component like this:

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

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

But everytime I click the any of the items the detail view does not show up and it shows error like this:

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

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

Am I on the right track of using Auxiliary route and is there any better way to achieve this feature?

推荐答案

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

The current router version has some issues in navigating to aux outlet using routerLink and navigate method. You should build the full URL and use navigateByUrl.

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

带有示例的柱塞.单击详细信息按钮，然后进行管理.管理员在管理员插座中路由.全屏打开以查看URL格式.

Plunker with example. Click on detail button and then admin. Admin is routed in admin outlet. Open in full screen to see URL formation.

URL具有以下语义

1. 子路径由/
分隔
2. 如果路径中有兄弟姐妹，则应将其括在括号中
3. 兄弟姐妹由//
分隔

4. 插座和路径之间用分隔:

1. Child path is separated by /
2. If a path has siblings then it should be surrounded with parenthesis
3. Sibling are separated by //

4. Outlet and path is separated by :

Parent/child/(gchild1//outletname:gchild2)

Parent/child/(gchild1//outletname:gchild2)

另一个问题

这篇关于Angular2从组件导航到同级组件，而无需拆除第一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！