首页 文章

Angular2从组件导航到兄弟组件而不会拆除第一个组件

提问于
浏览 次
2

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

我目前的设计如下：
enter image description here

当我启动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'
.

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

html angularjs angular angular-routing

1 回答

  • 3

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

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

    带有example的弹药 . 单击详细信息按钮，然后单击admin . 管理员在管理员插座中路由 . 全屏打开以查看URL格式 .

    URL具有以下语义

    • 子路径由/分隔

    • 如果路径有兄弟姐妹，那么它应该用括号括起来

    • 兄弟姐妹由//分隔

    • 出口和路径由以下分隔：

    父/子/（gchild1 // outletname：gchild2）

    另一个question

    回复于

相关问题