Infinite Nested Routing in Angular2

Question

I am trying to Implement a File Explorer App in Angular2.

My Home Component will be having a list of Folders and Files. If I click on Some Folder in the List, then using Clicked Folder's name as query string i should navigate to another component which again having list of Further folder and files inside it and this can continue for some more nested levels. I want each opened folder's path to be visible in url bar (i.e ./Folder1/Folder1.1/Folder1.1.2...so on.)

Folder1
    Folder1.1
        Folder1.1.1
        Folder1.1.2
    Folder1.2
Folder2

Can Anyone please help me in achieving this because since component can not be used both as view and router, I am finding difficulty in achieving this because this almost infinite nesting is not allowed.

Answer 1

Is there a reason why on each click you need to go to a separate view? Wouldn't it be simpler to just update the current view with some type of bootstrap breadcrumb representing your traversal of the file system?

That being said you could always do something like this.

Setting up your paths with @RouteConfig:

@RouteConfig([
    {path:'/', name:'Home', component:HomeComponent},
    {path:'/dir/:name', name:'Dir',component:DirComponent}
])

Example of how you could pass the dir name as a url param:

<a [routerLink]="['Dir',{name:'MyDirectory'}]">Profile</a>

Then within the constructor of your DirComponent you could get that param:

constructor(private params: RouteParams) {

            let dirName = params.get('name');
}

The basic concept is that in your main component you could pass a directory name and hand it off to another route as a url param.

Once again, I would suggest rethinking why you need a separate route for each directory traversal, but this should give you one option for passing information between components.

I would also suggest looking into sharing data between parent/child components. That could be another option if you need data available to multiple components.