angular - 创建带有可选子项的路由

Question

是否可以配置带有children 的“终端”路由，或者换句话说，带有“可选”children 的路由。

我正在尝试创建一个可路由的主/详细信息 View ，其中最初不显示详细信息，并且在打开详细信息 View 时列表不会被破坏。

例如，导航到/a，然后在不破坏a的情况下，导航到/a/1。

第一次尝试:

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent, children: [
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

...使用此配置，将引发以下错误:

EXCEPTION: Error: Uncaught (in promise): 错误:无法匹配任何路由:'a'

第二次尝试:

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent },
  { path: 'a', component: AListComponent, children: [
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

...列表组件被销毁并重新创建，即如果它有用户输入，则值会消失。

第三次尝试 - 创建一个“空”组件并默认加载它。

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent, children: [
    { path: '', component: EmptyComponent },
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

... 有效，但感觉像是一种解决方法。

有没有更好的办法？

Answer 1

第三次尝试的一个更简单的版本是简单地使用一个空路径，其中没有任何其他内容，甚至没有组件:

const routes: Routes = [
  { path: 'a', component: AListComponent, children: [
    { path: '' },
    { path: ':id', component: ADetailsComponent }
  ]},
];

Victor Savkin 拥有 written about componentless routes ，尽管他并没有像这样使用完全空的路由(他的示例包含 redirect 或 children 属性)。

根据您的设置，您甚至可以更进一步删除 /a小路。我有一个 routes在功能模块中这样声明，在 path: 'module-path' 下延迟加载:

const routes: Routes = [
  { path: '', component: AListComponent, children: [
    { path: '' },
    { path: ':id', component: ADetailsComponent }
  ]},
];

所以路由到/module-path加载包含空 <router-outlet> 的 AListComponent , 并路由到 /module-path/5用 ADetailsComponent 填充导出。