Angular 4: routing rule with undefined parameters

Question

I have an Angular 4 browser system that retrieves only the current contents of a folder. This is similar to the behavior of the dropbox website .

Required Behavior:

I can display the current path in the palette.

I would like to associate my breading with the routing rules as shown below: (I have this) (And I need it to be the same)

The problem is that there can be an infinite number of subfolders, so I cannot use a static route rule.

How to create such a rule using an undefined number of parameters that I can get to get the current file path?

I want to be able to run the application directly with this URL: localhost:4200/files/images/myfolder/test/and get the path so that I can directly get this specific folder.

What I already did:

I have this simple routing rule for a file page:

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

My current folder path - this is just an array of files: this.stackFolder: Array<MyFile>. This is how I get the contents of my breading.

I already read all the angular.io documentation on routing, and also read a few questions about adding dynamic route rules.

Answer 1

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

Plunger example

I think the best approach for you is to use LazyLoading.

• .
• -,
• , , .
• :id .

. . ,

p.s. child <router-outlet>, , . , .