有没有一种非手动的方法来创建Angular 6路由器路径的类似目录的结构

Question

我正在设置一个Angular 6应用程序。组件使用类似目录的结构，目录可以包含其他目录，就像它们在磁盘上一样嵌套。该组件将显示目录中文件和其他目录的列表，如果用户单击某个目录，我希望应用程序向下嵌套一级，并让URL反映这一点。换句话说，我希望路由器将状态信息保存在URL中，这样用户就可以使用浏览器中的后退按钮并进行其他正常导航。

我可以在路由器模块中使用以下代码来实现这一点：

{ path: 'show-dir/:dir1', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2/:dir3', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2/:dir3/:dir4', component: ViewDirectoryComponent }
....

然而，这是有限制的，因为我手动输入每个级别，不想有100个手动输入(然后限制为100个嵌套目录…(

有更好的方法来实现这一点吗？

谢谢你的帮助。

Answer 1

有趣的问题。也许，如果您将所有这些路径配置为根路径的子路径，您就可以在不必手动重复路径的情况下完成所需的任务。

类似于：

{
path: 'show-dir', children: [
{ path: '**', component: ViewDirectoryComponent }
]
}

您有根显示目录路径，对于子路径，您指定**，该路径将匹配任何路由并加载视图目录组件。使用ActivatedRoute获取并解析url以显示相关内容。

Answer 2

如果你想在所有配置的路由上循环，你可以从router.config 获得路由

for (var i = 0; i < this.router.config.length; i++) {
var routePath:string = this.router.config[i].path;
console.log(routePath);
}