Angular роутер-аутлет для / admin route

Question

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

Я хочу создать панель администратора, которая будет доступна из / admin url. Когда я получаю доступ к / admin, я хотел бы отображать только AdminPageComponent, а не компонент заголовка и нижнего колонтитула из app.component. html, который я использую для всех других URL-адресов. Я пытался решить эту проблему с помощью нескольких маршрутизаторов, но не смог найти решение, которое бы работало так, как я хочу. Есть ли хорошее решение, которое я мог бы использовать для моей ситуации?

 { path: '', component: HomePageComponent },
 { path: 'hockey', component: HockeyPageComponent },
 { path: 'football', component: FootballPageComponent },
 { path: 'tennis', component: TennisPageComponent },
 { path: 'other', component: OtherPageComponent },
 { path: 'stats', component: StatsPageComponent },
 { path: 'results', component: ResultsPageComponent },
 { path: 'login', component: LoginPageComponent },
 { path: 'articles/:id', component: ArticlePageComponent},
 { path: 'register', component: RegisterPageComponent},
 { path: 'admin', component: AdminPageComponent},
 { path: '**', redirectTo: ''} 

Мой app.component. html выглядит так:

<app-navigation></app-navigation>

<main role="main">

  <div class="row">
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 reklama">
      <p>Reklama left</p>
    </div>

    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12">
      <router-outlet></router-outlet>
    </div>

    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 reklama">
      <p>Reklama right</p>
    </div>
  </div>
</main>

<app-footer></app-footer>

Answer 1

Ваш AppComponent должен содержать только контент, который используется ВСЕМИ вашими компонентами. Если между всеми компонентами нет общего контента, HTML AppComponent должен быть <router-outlet></router-outlet>. Затем вы можете добавить дочерние маршруты к вашему модулю маршрутизации, которые добавляют различные общие части вашего приложения.

Например, MainWrapperComponent и AdminWrapperComponent с их собственными выходами маршрутизатора, окруженными общим разделом HTML каждого раздела.

В вашем модуле маршрутизации вы можете настроить такую ​​структуру:

const routes = [
 // This component defines the shared main content around a router outlet.
 { path: '', component: MainWrapperComponent, children: [
     // This component is a main page
     { path: 'home', component: HomeComponent}
   ]
 },
 // This component defines the shared admin content around a router outlet.
 { path: 'admin', component: AdminWrapperComponent, children: [
     // This component is an admin page
     { path: 'home', component: AdminHomeComponent}
   ]
 }
]