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

问题描述

我刚刚开始学习 Angular2，我想构建一个非常常见的list-detail"样式页面，类似于:

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

export const HomeRoutes: RouterConfig = [{小路: ''，重定向到:'/home',路径匹配:'完整'},{路径:'家'，组件:HomeComponent，孩子们: [{小路: ''，组件:列表组件},{路径: ':item',组件:细节组件出口:'细节'}]}];

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

 
首页
<路由器插座></路由器插座><router-outlet name="detail"></router-outlet>

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

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

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

错误:未捕获(承诺):错误:无法匹配任何路由:'home/item'.

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

解决方案

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

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

Plunker 与 示例.单击详细信息按钮，然后单击管理员.管理员在管理出口中路由.全屏打开以查看 URL 的构成.

URL 具有以下语义

1. 子路径由/分隔
2. 如果一条路径有兄弟姐妹，那么它应该用括号括起来
3. 兄弟姐妹之间用//分隔

4. 出口和路径用 :

   分隔

   父/子/(gchild1//outletname:gchild2)

另一个问题

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:

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'
      }
    ]
  }
];

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

  <h2>Home</h2>

  <router-outlet></router-outlet>

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

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?

解决方案

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)

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

The URL has following semantics

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)

Another so question

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