Infinite nested routing in Angular2

Question

I am trying to run a File Explorer application in Angular2.

My home component will have a list of folders and files. If I click on “Some Folder” in the list, then using the name “Clicked Folder” as the query string, I must go to another component that again has a list of additional folders and files inside it, and this may continue for some more nested levels . I want every open folder path to be visible in the url line (e.g.. / Folder1 / Folder1.1 / Folder1.1.2 ... so on.)

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

Can someone help me in achieving this, because since the component cannot be used both in the view and in the router, it is difficult for me to achieve this, because this almost endless embedding is not allowed.

Answer 1

Is there a reason why you need to switch to a separate view on each click? Would it be easier to just update the current view with some type of bootstrap representing your file system traversal?

Having said that, you can always do something like this.

Customizing your paths with @RouteConfig:

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

An example of how you could pass the name dir as the url parameter:

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

Then, inside the constructor of your DirComponent, you can get this parameter:

 constructor(private params: RouteParams) { let dirName = params.get('name'); } 

The basic concept is that in your main component you can pass the directory name and pass it to another route as a url parameter.

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

I would also like to explore the possibility of sharing data between parent / child components. This may be another option if you need data available for multiple components.