Angular2中的无限嵌套路由

Question

我正在尝试在Angular2中实现文件资源管理器应用程序.

我的主页组件将包含文件夹和文件列表.如果我单击列表中的某些文件夹,然后使用单击文件夹的名称作为查询字符串,我应该导航到另一个组件,该组件再次具有其中的进一步文件夹和文件的列表,这可以继续一些更多的嵌套级别.我希望每个打开的文件夹的路径在url栏中可见(即./Folder1/Folder1.1/Folder1.1.2...so on.)

Folder1
    Folder1.1
        Folder1.1.1
        Folder1.1.2
    Folder1.2
Folder2

任何人都可以帮助我实现这一点,因为组件不能用作视图和路由器,我发现很难实现这一点,因为这种几乎无限的嵌套是不允许的.

Answer 1

为什么每次点击都需要转到单独的视图？使用某种类型的代表文件系统遍历的引导程序面包屑来更新当前视图不是更简单吗？

话虽这么说，你总是可以做这样的事情。

使用 @RouteConfig 设置路径：

@RouteConfig([
    {path:'/', name:'Home', component:HomeComponent},
    {path:'/dir/:name', name:'Dir',component:DirComponent}
])

如何将目录名称作为 url 参数传递的示例：

<a [routerLink]="['Dir',{name:'MyDirectory'}]">Profile</a>

然后在 DirComponent 的构造函数中您可以获得该参数：

constructor(private params: RouteParams) {

            let dirName = params.get('name');
}

基本概念是，在主组件中，您可以传递目录名称并将其作为 url 参数传递给另一个路由。

再次，我建议重新思考为什么每个目录遍历都需要单独的路径，但这应该为您提供在组件之间传递信息的一种选择。

我还建议考虑在父/子组件之间共享数据。如果您需要多个组件可用的数据，这可能是另一种选择。