title: routing to a component within router-outlet
body: <p>I have an app with several routes, one of them with children. My issue is that I would have to somehow "overwrite" what the <code>&lt;router-outlet&gt;</code> displays from within one of the components that it displays.</p>
  
  <p>My route-tree looks somewhat like this:</p>
  
  <pre><code>{
      path: 'path1',
      component: 'Comp1'
    },
    {
      path: 'path2',
      component: 'Comp2'
    },
    {
      path: 'products',
      component: ProductsComponent,
      children: [
        {path: 'product-container',
          component: EditComponent
        }
      ]
    }
  </code></pre>
  
  <p>I have my app.component.html set up like this:</p>
  
  <pre><code>&lt;div class="nav"&gt;
    &lt;a [routerLink]="['path1']"&gt;Path 1&lt;/a&gt;
    &lt;a [routerLink]="['path2']"&gt;Path 2&lt;/a&gt;
    &lt;a [routerLink]="['products']"&gt;Products&lt;/a&gt;
  &lt;/div&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>now inside the ProductsComponent, I have a button that needs to link to the EditComponent, a page meant to edit a product or add a new one.
  So I made a button like this inside of it:</p>
  
  <pre><code>&lt;a [routerLink]="['product-container']"&gt;Add&lt;/a&gt;
  </code></pre>
  
  <p>The path it links to is <code>products/product-container</code>, which to me seems correct. Though clicking it, while navigation works in itself (url in browser changes), the displayed content never changes. Obviously, adding another <code>&lt;router-outlet&gt;</code> in my products page will display the EditComponent inside it.</p>
  
  <p>The question now is: Is there a way to "overwrite" the <code>&lt;router-outlet&gt;</code> in the app.component.html to display the EditComponent instead of the ProductComponent when I press the "Add" button in ProductComponent?</p>
  
  <p>Or would I alternatively have to let the Add button switch between two page-parts with their own ngIf or something like that?</p>
  
  <hr>
  
  <p>Edit: 
  Another option I thought off would be to place both ProductComponent and EditComponent in their own RoutingModule and on the same level, then create a "parent" component for both and have them share one <code>&lt;router-outlet&gt;</code> within that parent component. Though I'd prefer seeing if there are other options first before I implement something like that.</p>