angular - Angular2 中的无限嵌套路由

Question

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

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

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

谁能帮我实现这个，因为组件不能同时用作 View 和路由器，我发现实现这个很困难，因为不允许这种几乎无限的嵌套。

Answer 1

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

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

使用@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 参数传递给另一个路由。

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

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