Question

以这种方式配置应用程序组件，我想制作一个管理页面，以及如何放置一个不同的app-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 { }

不同页面的Angular 7不同菜单

1 个答案: