I'm build an app where I want to map TreeList navigation with routes. Imagine the file explore:

  - desktop
    - file1.txt
  - pictures
    - wallpaper
      - my-selfie.png
  - file2.txt
  - file4.txt

The url should take user to exact folder or file. E.g.

• url: {root}/explore/desktop will show content of folder 'desktop', which has content file1.txt;
• whereas {root}/explore/pictures/wallpaper?file=my-selfie.png will show the picture "my-selfie",
• and {root}/explore/pictures will only show folder 'pictures' that has a child folder 'wallpaper'.

I don't know exact how many levels the folders will nest. I know there's the concept of route params, and if I only have 1 folder level, then I could have setup route as:

{
  path: 'explore/:folder/', component: FileExploreComponent
}
// file-name can be attached as queryParam

I mean I could setup a dumb one and hope there's no deeper nesting. e.g.

{
  path: 'explore/:folder', component: FileExploreComponent
},
{
  path: 'explore/:folder/:folder1', component: FileExploreComponent
},
{
  path: 'explore/:folder/:folder1/:folder2', component: FileExploreComponent
},
// ... and so on

That is dumb, and unreliable - what if there's 5 level of nesting? So does anyone know if there's a way to express varying levels of route params?

CodePudding user response：

To make sure I got your point, you want to declare component with routing that you can use any number of params (folders), right?

Look, I don't think there's something directly helpful from Angular since the module routing declaration is fixed somehow, but there's a workaround!

• Declare a new module folders with routing

• We can access it from a parent module with loadChildren like:

  {
    path: 'folders',
    loadChildren: () =>
      import('./folders/folders.module').then((m) => m.FoldersModule),
  }
  

• Add only one route inside folders routing that redirects to FolderComponent, like:

  {
    path: '**', // it means any path prefixed with folders
    pathMatch: 'full',
    component: FoldersComponent,
  }
  

• Finally, we need the params inside the component, which won't be provided by ActivatedRoute since it's not defined explicitly in the routing, like:

  ngOnInit() {
      let urlParams = this.router.url.replace(/.*\/folders\//gi, '');
      this.params = urlParams.split('/').reduce((acc, id, index) => {
        acc[`folder${index   1}`] = id;
        return acc;
      }, {});
  }
  

Check the example here

CodePudding user response：

In this case I can give the idea to perform the function.

You need to perform the below steps in order to make the dynamic routes.

1. Create a base component that will be loaded on the root route.
2. Use any file system dependency or an API call that will load the folder structure from the remote system.
3. Push the dynamic routes for each component in it.
4. Use the same route and component as and when needed.

Can refer to stackblitz example for the same. https://stackblitz.com/edit/dynamic-routes-angular-example?file=src/app/app.component.ts