Я хочу сделать общий макет для верхнего, нижнего колонтитула, левой стороны и основного содержимого в приложении angular 8.
Я не хочу перезагружать верхний и нижний колонтитулы каждый раз, когда пользователь переходит с одной страницы на другую, за исключением некоторых страниц, таких как вход в систему, свяжитесь с нами.
Мой некоторый базовый c код похож на приведенный ниже
app.componant. html
<div>
<router-outlet name="header"></router-outlet>
<div>
<router-outlet name="leftMenu"></router-outlet>
<div>
<router-outlet name="content"></router-outlet>
</div>
</div>
<router-outlet name="footer"></router-outlet>
</div>
app. routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './header/footer.component';
import { LeftMenuComponent } from './header/left-menu.component';
const routes: Routes = [
{ path: '',
component: HeaderComponent,
outlet: "header",
},
{ path: '',
component: HeaderComponent,
outlet: "footer",
},
{ path: '',
component: HeaderComponent,
outlet: "leftMenu",
},
{ path: 'login',
loadChildren: () => import('./login/login.module').then(mod => mod.LoginModule)
},
{ path: 'home',
loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule)
},
{ path: '',
redirectTo: '/home',
pathMatch: 'full',
},
//{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
//EmptyModule,
RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
login.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
component: LoginComponent,
outlet: "content",
children: [
{
path: '', component: null,
outlet: "header",
},
{
path: '', component: null,
outlet: "footer",
},
{
path: '', component: null,
outlet: "leftMenu",
},
// { path: '**', component: Page404balanceComponent}
]
}
];
@NgModule({
imports: [
CommonModule,
//EmptyModule,
RouterModule.forChild(routes)
],
declarations: [LoginComponent]
})
export class LoginModule { }
При маршрутизации на домашней странице она работает правильно с заголовком, левым меню, содержание и нижний колонтитул. Но при входе в систему я не хочу отображать заголовок, левое меню и нижний колонтитул.
В ui-router мы можем перезаписать родительскую унаследованную маршрутизацию, используя @ like as @content, @header, но я не могу переписать как этот.
Итак, пожалуйста, помогите мне сделать это Тип раскладки вроде как ui-router.