I have the following angular app structure:
app.component.html -> startpage.component.html -> layout.component.html.
Wich means the following: in the app.component.html I have a simple router-outlet (nothing else). If the users logs in, the app redirects to the startpage component. For this I have this in the app-routing.module.ts:
...
{
path: 'startpage', component: StartPageComponent, children: [
]
}
...
In the startpage component I have the layout component (nothing else):
<layout></layout>
This layout component consists of a drawer with a sidebar and a header inside it like this:
<dx-drawer id="drawer"
#drawer
[(opened)]="isDrawerOpen"
openedStateMode="shrink"
revealMode="slide"
[closeOnOutsideClick]="true"
template="mainmenu"
(onOptionChanged)="toggled()">
<div *dxTemplate="let data of 'mainmenu'">
<app-sidebar #sidebar (itemClicked)="onItemClick($event)"></app-sidebar>
</div>
<div id="content">
<app-header (hamburgerClicked)="onHamburgerClick()" (settingsClicked)="onSettingsClick()" (userClicked)="onUserClick()"></app-header>
<div id="view" class="dx-theme-background-color"><router-outlet></router-outlet></div>
</div>
</dx-drawer>
As you see, there is an other router-outlet.
The goal is, if the user clicks in the sidebar on a menu element, it shows the corresponding component. For this I have f. e. this in the app-routing.module.ts:
...
{
path: 'masterdata', component: StartPageComponent,
children: [
{ path: 'general', component: MdGeneralComponent },
{ path: 'costaccounting', component: MdCostAccountingComponent },
{ path: 'prodplanning', component: MdProdPlanningComponent }
],
}
...
It works, but with an issue. In my app, the user can select some skins. Depending on the skin, the app-header gets an other color. It works too. But if I click in the sidebar on an other element, the header gets the default skin settings. It is, because the startpage.component gets loaded again and it loses the settings. But if I don't give a component to the masterdata, there is no header and sidebar anymore, just the clicked component (f. e. MdGeneralComponent).
My goal is to avoid this reload of the startpage.component. Which means, on each and every click on a sidebar element only the router-outlet on the 2. level gets changed and the startpage.component (and so the layout.component) remains the same.
How to do that? I have experimented with the app-routing.module.ts, but no success.
question from:
https://stackoverflow.com/questions/65873243/nested-routing-in-angular-changes-the-outer-component 
