Как менять два компонента в зависимости от маршрута в Angular 2+?

Question

[Андрей]

Есть приложение такого вида

<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>

Менять один из компонентов вместе с маршрутом - не проблема. Как менять два компонента? Сделать один из них дочерним для другого не получается из-за такой структуры вёрстки.
Простое и очевидное решение (если бы оно существовало), выглядело бы так

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

Вопрос - как в angular менять два компонента вместе с маршрутом? Или, может есть другое решение такой проблемы?

Answer 1

[Ivan Stroykin]

Если правильно понял, то можно, допустим, в shared создать модуль layout, в котором будет директория wrapper (обертки) ну и все остальные части каркаса (header, sidebar, footer и т.д.). И вот во wrapper будут располагаться собранные каркасы под определенные роуты. К примеру, будет FirstLayoutComponent и SecondLayoutComponent. С каркасами вроде:

FirstLayoutComponent

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

SecondLayoutComponent

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

И в роутинге делаем прослойку:

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

И тогда все компоненты которые будут являться дочерними для компонента FirstLayoutComponent будут иметь первую структуру, а все дочерние компоненты SecondLayoutComponent будут иметь вторую структуру, соответственно. Обертки естественно будут Ваши. Можно сделать хоть полностью 2 разных дизайна по разных адресам

Comments

[Андрей]

Да, пожалуй единственное решение, это переход на использование дочерних компонентов

Answer 2

[Sergey Epifanov]

вот это не подойдет?

Comments

[Андрей]

Чтобы использовать дочерние компоненты нужно засунуть один в другой, а я не могу этого сделать из-за верстки. Между этими компонентами есть еще один компонент с меню.

[Sergey Epifanov]

Андрей, думаю, что придется в данном случае решать проблему внутри header-component

Answer 3

[Pantene742]

Их обоих вставь в родителя. и по роуту сови родителя.

Comments

[Pantene742]

Или склей их в один компонент. Это полюбасу можно сделать. два самый любых компонента можно сделать одним.

[Pantene742]

Pantene742, просто конфликтные(одинаковые) стили и переменные надо переименовать. для стилей можешь просто префиксы дописать и все дела.

[Pantene742]

А вообще второй ангуляр ну очень плохой. именно второй который без CLI. Поэтому мой совет взять у заказчика денег и перевести его на 2.4 +. на 6 ангуляр не использовав ни одного deprecated класса. и тогда еще лет 10 этот проtкт можно будет без проблем поддерживать