是否有非手动方式来创建 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

如果要遍历所有配置的路由，可以从router.config

获取路由

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

Answer 2

有趣的问题。也许如果您将所有这些路径配置为根路径的子路径，则无需手动重复路径即可完成所需的操作。

类似于：

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

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

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

Is there a non-manual way to create a directory-like structure of Angular 6 router paths?

angular

angular-router

angular6