Угловые 7 разных меню для разных страниц

Question

Компонент приложения настроен таким образом, я хочу создать страницу администратора и как разместить другое приложение-navbar

 <app-nav></app-nav>
<router-outlet></router-outlet>

<app-footer></app-footer>

Это мой модуль рутирования.

чтоизменения, которые я должен сделать здесь

const routes: Routes = [
  { path: 'Home', component:NavComponent,children:[{path:'',component:HomeComponent}] },
  { path: 'Teams', component:TeamsComponent,outlet:'sub' },
  { path: 'Calendar', component:CalendarComponent },
  { path: 'Fixture', component:FixtureComponent },
  { path: 'Gallery', component:GalleryComponent },
  { path: 'Partners', component:PartnersComponent },
  { path: 'Streams', component:StreamsComponent },
  { path: 'Videos', component:VideoComponent },
  {path:'Login',component:LoginComponent},
  {path:'Ctrl',component:AdminComponent},
  { path: '**', redirectTo: 'Home', pathMatch: 'full' }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

   constructor(){

   }

 }

Answer 1

Попробуйте определить макет на основе вашей маршрутизации

FooterOnlyLayoutComponent:

<div class="content" fxFlex>
 <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

Чтобы использовать этот макет для маршрута входа в систему, необходимо указать маршрут следующим образом:

const routes: Routes = [
 {
   path: 'login',
   component: FooterOnlyLayoutComponent,
   children: [
     { path: '', component: LoginComponent },
   ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule]
})
export class LoginRoutingModule { }

Другой макет:

MainLayoutComponent:

const routes: Routes = [
 {
   path: 'dashboard',
   component: MainLayoutComponent,
   children: [
     { path: '', component: DashboardComponent }
   ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule]
})
export class DashboardRoutingModule { }