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