我想在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 { }
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中,我们可以使用@如@ content,@ header来覆盖父继承的路由,但我不能那样覆盖。
所以,请帮助我进行此类布局,例如ui-router。
您应该定义所需的静态组件。在组件中定义选择器,模板和样式,例如
@Component({
selector: 'header-component',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css'],
})
在app-routing.module.ts中:
const routes: Routes = [
{path: 'login', component: loginComponent},
{path: 'contacts', component: contactsComponent}
];
然后进入您的app.component.html
<div>
<header-component *ngIf="router.url !== '/login'"></header-component>
<div>
<left-menu-component *ngIf="router.url !== '/login'"></left-menu-component>
<div>
<router-outlet></router-outlet>
</div>
</div>
<footer-component *ngIf="router.url !== '/login'"></footer-component>
</div>
您必须在模板中使用[routerLink]="['your-path']"
在组件之间路由。