navigationend - Angular 4: regla de enrutamiento con un número indefinido de parámetros

router events subscribe angular 4

Question

Tengo un sistema de búsqueda de archivos Angular 4, obteniendo solo el contenido actual de la carpeta. Es como el comportamiento del sitio web de Dropbox .

El comportamiento deseado:

Puedo mostrar la ruta actual en una ruta de navegación.

Me gustaría vincular mi rastro con mis reglas de enrutamiento como se muestra: (Tengo esto) (Y necesito que esto sea lo mismo)

El problema es que podría haber un número infinito de carpetas anidadas, por lo que no puedo usar una regla de ruta estática.

¿Cómo creo una regla así, con un número indefinido de parámetros que puedo recuperar para obtener la ruta actual del archivo?

Quiero poder iniciar la aplicación directamente con esta url: localhost:4200/files/images/myfolder/test/ y recuperar la ruta para poder obtener esta carpeta específica directamente.

Lo que ya hice:

Solo tengo esta regla de enrutamiento simple para la página de archivos:

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

La ruta de acceso de mi carpeta actual es simplemente una Matriz de archivos: this.stackFolder: Array<MyFile> . Así es como obtengo mi contenido de migas de pan.

Ya leí toda la documentación de angular.io sobre enrutamiento y también leí algunas preguntas sobre cómo agregar reglas de ruta dinámicas.

Answer 1

Me tomé un poco de tiempo para hacer un ejemplo de mi idea para ti

Ejemplo de Plunker

Creo que el mejor enfoque para ti es utilizar un LazyLoading.

1. Le da la posibilidad de realizar la carga de recursión de módulos. Como en la carpeta tres
2. En segundo lugar, puede realizar solo un componente para todas las vistas de carpetas
3. Este enfoque es mejor por el rendimiento, ya que su aplicación no necesita cargar todos los módulos antes de hacerlo de memoria.
4. Puede usar parámetros de ruta :id para crear el enlace correcto a sus carpetas.

Mira un ejemplo Espero que esto te ayude

ps Yo uso un ejemplo de un niño <router-outlet> pero creo que no necesita hacer lo mismo. Lo hago solo por ejemplo.