Angular 4:具有未定义数量的参数的路由规则

Question

我有一个Angular 4文件浏览器系统,只获取当前文件夹内容.这就像Dropbox网站的行为一样.

期望的行为:

我能够在面包屑中显示当前路径.

我想用我的路由规则绑定我的痕迹,如下所示: (我有这个) (我需要这个是相同的)

问题是可能存在无限数量的嵌套文件夹,因此我无法使用静态路由规则.

如何创建这样的规则,我可以检索未定义数量的参数以获取当前文件路径？

我希望能够直接使用此url启动应用程序:localhost:4200/files/images/myfolder/test/并检索路径,以便我可以直接获取此特定文件夹.

我做了什么:

我只对文件页面有这个简单的路由规则:

const filesRoutes: Routes = [
  { path: 'files', component: FilePageComponent }
  // I need something like that
  { path: 'files/:folder1/:folder2/[...]', component: FilePageComponent } 
];

我当前文件夹的路径只是一个文件数组:this.stackFolder: Array<MyFile>.这就是我获取面包屑内容的方式.

我已经阅读了有关路由的整个angular.io文档,还阅读了有关添加动态路由规则的一些问题.

Answer 1

我花了一点时间为你做了一个我的想法的例子

笨蛋的例子

我认为最适合您的方法是使用 LazyLoading。

1. 它使您可以递归加载模块。就像文件夹三一样
2. 二、可以实现所有文件夹视图只用一个组件
3. 这种方法的性能更好，因为您的应用程序不需要在死记硬背之前加载所有模块。
4. 您可以使用路由参数:id来创建指向文件夹的正确链接。

看一个例子我希望这对你有帮助

PS我用了一个孩子的例子<router-outlet>，但我认为你不需要做同样的事情。我只是为了举例而已。