¿Hay alguna forma de mostrar una ruta secundaria en el <router-outlet> de la ruta principal?
Por ejemplo, digamos que tenemos dos rutas:
/users/12345 /users/12345/orders/12345 Necesito que el segundo sea un hijo del primero, pero también necesito reemplazar completamente el contenido de /users/12345 con el contenido de /users/12345/orders/12345 opuesto a tener /users/12345/orders/12345 en el /users/12345 sub router-outlet .
Pensé que podría hacer esto simplemente nombrando la salida del enrutador de nivel principal y haciendo que ambas rutas lo apunten, pero a partir de la investigación que he estado haciendo (y los errores que causó) tengo la sensación de que los nombres estaban destinados a usos secundarios cuando ya existe una salida de enrutador principal
Tuve el mismo problema. Así es como lo arreglé:
const routes: Routes = [ { path: '', children: [ { path: '', component: ParentComponent, }, { path: 'child', component: ChildComponent, } ] } ];Puede hacerlo configurando sus rutas de esta manera:
const routes : Routes = [ { path : 'user/:id', component : ParentComponent, children : [ { path : '', component : UserComponent }, { path : 'order/:id', component : OrderComponent } ] } ] La plantilla de ParentComponent tendrá solo el <router-outlet> para cargar sus elementos secundarios.
Si necesita ocultar algo (como una cuadrícula de datos o un panel de instrucciones) en función de que una ruta secundaria esté activa, simplemente puede usar esto:
<div *ngIf="outlet.isActivated == false"> Please select a child route! </div> <router-outlet #outlet="outlet"></router-outlet> Es importante incluir #outlet="outlet" con las comillas porque está exportando una referencia de variable de plantilla.
También hay eventos en router-outlet para la activación y desactivación.
Una alternativa es obtener la ruta secundaria cuando ocurre el evento NavigationEnd y luego tomar decisiones sobre qué mostrar u ocultar. Para casos más simples, el primer enfoque debería funcionar bien.
Tampoco creo que sea relevante para su pregunta, pero puede ocultar completamente una router-outlet con un *ngIf como lo haría con cualquier otra cosa.