代码之家 › 专栏 › 技术社区 › dmcgrandle

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

angular-router angular6 angular

dmcgrandle · 技术社区 · 6 年前

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

我可以通过路由器模块中的以下代码来完成此任务:

{ 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个嵌套目录…)

有没有更好的方法来实现这一点?

谢谢你的帮助。

2 回复 | 直到 6 年前

Adrian Fâciu 6 年前

有趣的问题。如果将所有这些路径都配置为根路径的子路径,则无需手动重复路径即可完成所需的任务。

类似于:

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

你有根 显示目录 path和为子级指定**,它将匹配任何路由并加载视图目录组件。使用activatedroute获取并解析url以显示相关内容。

Sajeetharan 6 年前

如果要在所有配置的路由上循环,可以从router.config获取路由

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

推荐文章

BBaysinger alex · 未调用角度2+路由解析程序

6 年前

Justin · 如何向ActivatedRoute添加段?

6 年前

CodeMan · Angular 2路由导航在新选项卡中运行(使用Angular Router naviagte)

6 年前

roger_that · Angular2:从URL访问查询参数时出错

6 年前

JUNNNN · Angular 5使用Angular Universal从API设置路由

6 年前

Felipe Micali · 输入父管线角度5时导航到上次访问的子管线

7 年前

HansMusterWhatElse · 角度-跨不同模块提供防护

7 年前

Wai Yan Hein · 子模块的角度5布线不工作

7 年前

OrdinaryProgrammer · 当我要在URL中传递参数时,读取了错误的URL

7 年前

TheProfiler · 如何保持角航线导航固定?角度路由重定向到新页面

7 年前