Несколько модулей на маршрут Angular?

Question

[Krokochik]

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

<h1>Angular App</h1>
<app-header></app-header>
<router-outlet></router-outlet>

и, например такой роутинг:

export const routes: Routes = [
    {
        path: "about", component: AboutComponent
    },
    {
        path: "product", component: ProductComponent
    },
    {
        path: "", redirectTo: "/main", pathMatch: "full"
    }
];

Но что я не понимаю: как сделать, чтобы хэдер не перерисовывался каждый раз при смене адреса (т.е., я понимаю, хэдер не должен быть в routing-outlet), но при переходе на путь "/login", хэдера не было? Я понимаю, что, вероятно, можно сделать с помощью *ngIf, но должен же быть более лаконичный вариант?

Answer 1

[Антон Швец]

export const routes: Routes = [
     {
        path: "login", component: LogintComponent
    },
   {
        path: "", component: LayoutComponent // в нем уже ваш хеадер и второй аутлет
        children: [
      {
        path: "about", component: AboutComponent
    },
    {
        path: "product", component: ProductComponent
    },
        ]
    },
];