Is there a non-manual way to create a directory-like structure of Angular 6 router paths?

Question

I am setting up an Angular 6 app. A component uses a directory-like structure and the directories can contain other directories, nested just like they are on disk. The component will display a list of what is in the directory, both files and other directories, and if the user clicks on a directory I want the app to nest one level down and for the URL to reflect that. In other words, I want the router to keep state information in the URL so the user can use the back button in the browser and have other normal navigation.

I can accomplish this with the following code in the Router module:

{ path: 'show-dir/:dir1', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2/:dir3', component: ViewDirectoryComponent },
{ path: 'show-dir/:dir1/:dir2/:dir3/:dir4', component: ViewDirectoryComponent }
....

However, this is limiting because I am manually entering each level and don't want to have 100 manual entries (and then a limit of 100 nested directories ...)

Is there a better way to accomplish this?

Thanks for any help.

Answer 1

Interesting problem. Maybe if you configure all those paths as children to a root one, you could accomplish what you need without having to manually repeat paths.

Something like:

{
    path: 'show-dir', children: [
        { path: '**', component: ViewDirectoryComponent }
    ]
}

You have the root show-dir path and for children you specify ** which will match any route and load the view directory component. Use the ActivatedRoute to fetch and parse the url to show the relevant contents.