How to change two components depending on route in Angular 2+?

Question

Angular

Is there an application like this?

<root-component>
  <div id="header>
    <header-component>
      Здесь верхнее меню и некоторые блоки (например - касса итд).
      Зависит от маршрута
      Часто этот компонент может соответствовать нескольким маршрутам
    </header-component>
    <right-menu-component>
      Меню в верхнем левом углу. Не зависит от маршрута, всегда показывается.
    </right-menu-component>
  </div>
  <div id="content">
     <router-outlet>
       //Здесь всё содержимое, вся бизнес-логика. Зависит от маршрута.
     </router-outlet>
  </div>
</root-component>

Changing one of the components along with the route is not a problem. How to change two components? It is not possible to make one of them a child of the other due to such a layout structure.
A simple and obvious solution (if it existed) would look like this

const routes: Routes = [
  { path: 'orders', components: 
    [
      {selector: 'header-component', component: 'SomeHeader'},
      {selector: 'content-component', component: 'SomeComponent'}
    ]
  }...

Question - how in angular to change two components along with the route? Or maybe there is another solution to this problem?

Answer 1

If you understand correctly, then you can, for example, create a layout module in shared, in which there will be a wrapper directory (wrappers) and all other parts of the frame (header, sidebar, footer, etc.). And now the assembled frames for certain routes will be located in the wrapper. For example, there will be FirstLayoutComponent and SecondLayoutComponent. With frameworks like:

FirstLayoutComponent

<header>...</header>
<main>
  <router-outlet></main>
<footer>...</footer>

SecondLayoutComponent

<header>...</header>
<main>
  <sidebar>...</sidebar>
  <router-outlet>
</main>
<footer>...</footer>

And in the routing we make a layer:

const routes: Routes = [
  {
    path: 'first', component: FirstLayoutComponent, children: [
      { path: 'test1', component: Test1Component }
    ]
  },
  {
    path: 'secod'm component: SecondLayoutComponent, children: [
        { path: 'test2', component: Test2Component }
    ]
  }
];

And then all components that will be children of the FirstLayoutComponent component will have the first structure, and all child components of the SecondLayoutComponent will have the second structure, respectively. The wrappers will naturally be yours. You can make at least completely 2 different designs at different addresses

this wo n't fit?

Put them both in the parent. and on the route of the parent's owl.

Answer 2

this wo n't fit?

Answer 3

Put them both in the parent. and on the route of the parent's owl.