0

In an angular 16 app I have a simple UI component which takes content and puts it into a draggable pane.

draggable-pane.component.html

<ion-apple-clips #paneContainer>
    <ng-content></ng-content>
</ion-apple-clips>

On my main page I was using this component to wrap a router outlet

main.page.html

<app-draggable-component>
    <router-outlet></router-outlet>
</app-draggable-component>

This worked, but I had an issue with content not being cleared properly when the child route changed, so I created a new component which included the router-outlet directly rather than relying on <ng-content>

router-draggable-pane.html

<div #paneContainer>
  <router-outlet></router-outlet>
</div>

The router-draggable-pane component doesn't work, though the original does. From debugging, I'm sure the route is loading correctly, but it seems like Angular doesn't realise which router outlet to put the loaded content into. I'm not getting any error messages, but the component remains blank.

I've been trying to debug this but am at a loss. Is there any reason that Angular wouldn't recognise a router outlet defined in a child component, directly, as opposed to being injected with an <ng-content> tag?

Improve this question
1
  • it seems there is an issue with workarounds for your case in angular Commented Mar 30 at 12:05
Related questions
171
Passing data into "router-outlet" child components
100
Angular 2 - Submodule routing and nested <router-outlet>
394
In Angular, how do you determine the active route?
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.