Блог

В моем приложении Angular (v.7) я хочу, чтобы практически на всех маршрутах была панель навигации и нижний колонтитул, которые отлично работают, т. Е. Мой app.component.html выглядит примерно так :

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

Мои маршруты выглядят так:

   {
    path: "foo",
    loadChildren: "./foo/foo.module#FooModule",
    canActivate: [AuthenticationGuard]
  },
  {
    path: "bar",
    loadChildren: "./bar/bar.module#BarModule",
    canActivate: [AuthenticationGuard]
  }
  

Для некоторых маршрутов мне требуется полноэкранная настройка, при которой верхний или нижний колонтитулы не видны.

Я хочу решить это с помощью маршрутов, а не с помощью директив, поскольку они делают все неудобным, и я не хочу обрабатывать дополнительное состояние, такое как флаг «isHeaderVisible».

Похоже, что должна быть хорошая настройка маршрутизатора, которая выполняет то, к чему я стремлюсь.

Итак, я, по сути, хочу, чтобы мой основной компонент по-прежнему был таким, как указано выше, а другой просто имел

 <router-outlet></router-outlet>
  

который получает другие маршруты

Я не могу определить настройку маршрута, которая работает для этого.

Вы можете создать 2 компонента-оболочки, такие как PublicComponent и AuthenticatedComponent

Предположим, что структура такая:

 - AppComponent
--- PublicComponent
------ LoginComponent
------ RegisterComponent
--- AuthenticatedComponent
------ DashboardComponent
------ SettingsComponent
  

Тогда ваши маршруты будут похожи:

 {
    path: '',
    component: AuthenticatedComponent,
    children: [
        {
           path: "foo",
           loadChildren: "./foo/foo.module#FooModule"
         },
        {
           path: "bar",
           loadChildren: "./bar/bar.module#BarModule",
         },
   canActivate: [AuthenticationGuard],
   canActivateChild: [AuthenticationGuard]
},
{
    path: '',
    component: PublicComponent,
    children: [
        {
           path: "login",
           component: LoginComponent
         },
         {
           path: "register",
           component: RegisterComponent
         },

}
  

И вам нужно соответствующим образом разместить router-outlet s:

AppComponent

 <router-outlet></router-outlet>
  

AuthenticatedComponent

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

PublicComponent

 <sidebar></sidebar>
<router-outlet></router-outlet>
<another-component></another-component>
  

Надеюсь, это даст вам подсказку