Angular 4 : Routing rule with an undefined number of parameters

Question

我有一个 Angular 4 文件浏览器系统，只获取当前文件夹的内容。 就像 dropbox网站行为。

期望的行为:

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

我想将我的面包屑与我的路由规则绑定(bind)，如下所示: (我有这个) (我需要这个是一样的)

问题是可能有无限数量的嵌套文件夹，所以我不能使用静态路由规则。

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

我希望能够直接使用此 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

我花了一点时间为您举例说明我的想法

Plunker Example

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

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

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

附注我用一个 child 的例子<router-outlet>但我认为你不需要这样做。我只是为了举例。