6

I have an Angular 4 file browser system, getting the current folder content only. It's just like the dropbox website behaviour.

The desired behaviour:

I am able to display the current path in a breadcrumb.

I would like to bind my breadcrumb with my routing rules as shown: enter image description here (I have this) enter image description here ( And I need this to be the same)

The problem is that there could be a infinite number of nested folders so I can't use a static route rule.

How do I create such a rule, with an undefined number of parameters I can retrieve to get the current file path?

I want to be able to start the app directly with this url : localhost:4200/files/images/myfolder/test/ and to retrieve the path so I can get this specific folder directly.

What I did already:

I only have this simple routing rule for the files page:

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

My current folder's path is simply an Array of files: this.stackFolder: Array<MyFile>. This is how I get my breadcrumb content.

I already read the entire angular.io documentation about routing, and also read some questions about adding dynamic route rules.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Kapcash
  • 6,377
  • 2
  • 18
  • 40
  • My best guess is that you may have to use a wildcard route and get the route parameters from the path directly. – yoonjesung Aug 25 '17 at 14:24
  • If I use a wildcard, I won't be able to detect uncorrect url unless I handle this by myself, by validating the url. I thought it would have some kind of trick to do what I'm looking for. – Kapcash Aug 25 '17 at 14:33

1 Answers1

0

I took a little time to make an example of my idea for you

Plunker Example

I think the best approach for you is using a LazyLoading.

  1. It gives you the possibility to make recursion loading of modules. Like in folder three
  2. Second, you can realize only one component for all folders views
  3. This approach is better by performance because your app doesn't need load all modules before you fo by rote.
  4. You can use route parameters :id for creating the right link to your folders.

See an example I hope this helps you

p.s. I use an example a child <router-outlet> but I think you don't need to do same. I make it only for example.

Roman Skydan
  • 5,478
  • 4
  • 19
  • 39