Я хочу сделать общий макет для заголовка, нижнего колонтитула, левой стороны и основного содержимого в приложении angular 8.
Я не хочу перезагружать верхний и нижний колонтитулы и левую сторону каждый раз, когда пользователь переходит с одной страницы на другую, за исключением некоторых страниц, таких как вход в систему, свяжитесь с нами.
Мой базовый код выглядит следующим образом:
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 { }
логин.модуль.тс
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 мы можем перезаписать маршрутизацию, унаследованную от родителей, используя @ как @content, @header, но я не могу перезаписать вот так.
Итак, пожалуйста, помогите мне сделать такой макет, как ui-router.
<app-header>
в app.component.html вместо<router-outlet>
? - person Jason White   schedule 29.01.2020