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

前端之家收集整理的这篇文章主要介绍了Angular 4:具有未定义数量的参数的路由规则前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个Angular 4文件浏览器系统,只获取当前文件内容.这就像 dropbox网站的行为一样.

期望的行为:

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

我想用我的路由规则绑定我的痕迹,如下所示:

enter image description here

(我有这个)

enter image description here

(我需要这个是相同的)

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

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

我希望能够直接使用此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文档,还阅读了有关添加动态路由规则的一些问题.

解决方法

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

Plunker Example

我认为最好的方法是使用LazyLoading.

>它使您可以进行模块的递归加载.就像文件夹三
>其次,您只能为所有文件夹视图实现一个组件
>这种方法性能更好,因为您的应用程序不需要在死记硬背之前加载所有模块.
>您可以使用路由参数:id来创建文件夹的正确链接.

看一个例子我希望这可以帮到你

附:我用了一个例子,一个孩子< router-outlet>但我认为你不需要这样做.我只是举例说.

猜你在找的Angularjs相关文章