1

I have routes declared like this:

const appRoutes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: 'elenco-interventi',
        component: InterventiComponent,
        children: [
          {
            path:'nuovo-intervento',
            component: NuovoInterventoComponent
          }
        ]
      },
    ]
  }
]

In the AppComponent I just have a <div> with a <router-outlet> inside, and the component InterventiComponent is correctly loaded at address /elenco-interventi. Then I want the children NuovoInterventoComponent to be found at address /elenco-interventi/nuovo-intervento, and it has to entirely replace the content of the parent component.
How do I have to use the <router-outlet> in parent correctly so that I can replace the entire content of the parent page, and also reload parent page and hide/not show children component content if I go back with the routing?
Example:

<div>
 <!--parent content-->
  <router-outlet></router-outlet> ==> when routing to children, just show children content
    and not children+parent content as I do now
</div>
Usr
  • 2,628
  • 10
  • 51
  • 91
  • If it's supposed to hide completely the parent, then it's not a child route but a sibling route. –  Jun 20 '19 at 08:31
  • I need it to be a child route for logical/business reasons, route has to be `/elenco-interventi/nuovo-intervento` , and I have to use breadcrumbs to show this flow – Usr Jun 20 '19 at 08:32
  • Sure, then it won't remplace the whole component (unless the parent component is just a router outlet, but that's a coincidence) –  Jun 20 '19 at 08:34
  • Isn't there a way? Maybe with a ngIf? – Usr Jun 20 '19 at 08:34
  • If it's with a condition then it's not routing ... –  Jun 20 '19 at 08:40
  • No I mean ngIf inside the parent content to load content or not if already routed to children, keeping the router-outlet – Usr Jun 20 '19 at 08:47
  • If you use a condition to hide the router outlet, as said, it won't be routing (and it should even throw an error in your application) –  Jun 20 '19 at 08:57
  • I won't hide the router outlet, instead, I will hide the other content. If I load the parent component, router-outlet won't show anything just because of its logic, then if I route to children I will hide parent. No ngIf for router-outlet. – Usr Jun 20 '19 at 08:59
  • Okay so you want to implement your own routing system (because that's basically what the router does) just to manage a single url ? Consider changing your business rules instead, that will take less time, effort, and will comply with the best practices and keep your code clean (well, cleaner than your solution) –  Jun 20 '19 at 09:09
  • Yes, unfortunately it's not MY business rule so I don't have degree of freedom to do that. I wouldn't complicate my life if it was that simple. Anyway, thanks for your time. – Usr Jun 20 '19 at 09:12
  • 1
    You're not supposed to listen to everything the business says. You have technical impossibilities that the business is not aware of, that's **your job** to point them out to adapt the application. If the business was the sole decider of an application, there would be no application ... And no problem, I didn't help at all –  Jun 20 '19 at 09:26
  • There is another use case - where the parent child relationship is maintained in order to pass resolver information from parent to child... https://stackoverflow.com/questions/41451375/passing-data-into-router-outlet-child-components ... AND still desire the child component to replace the parent in the primary router outlet. It would be nice if we could simply specify the primary outlet in the routing spec. – redevill Jun 16 '22 at 01:09

0 Answers0