Question

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

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

例如，导航至/a，然后在不销毁a的情况下，导航至/a/1。

首次尝试：

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

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

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: '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填充出口。

Answer 2

在我看来，一个没有显示第3次尝试所示内容的空虚拟成分是最好的方法。

创建包含可选子项的路由

2 个答案: