Question

我正在设置Angular 6应用。组件使用类似目录的结构，目录可以包含其他目录，就像嵌套在磁盘上一样。该组件将显示该目录（文件和其他目录）中的内容的列表，如果用户单击目录，我希望该应用程序向下嵌套一层，并使URL反映出来。换句话说，我希望路由器将状态信息保留在URL中，以便用户可以使用浏览器中的“后退”按钮并进行其他常规导航。

我可以在Router模块中使用以下代码来完成此操作：

{ 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 }
    ]
}

您具有根 show-dir 路径，对于子级，您指定**，它将匹配任何路由并加载视图目录组件。使用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);
}

是否有非手动方式来创建类似Angular 6路由器路径的目录结构？

2 个答案: