angular - 如何以角度覆盖路由插座?
问题描述
我想在 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 { }
登录模块.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 作为 @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']"
您必须在模板中使用的组件之间进行路由。
推荐阅读
- c++ - C ++中的零填充数组
- react-native - 在 React Native (expo) 中的 flatlist 元素上定位绝对子元素
- z3 - 是否可以使用符号工具反转 javascript 代码
- php - Eloquent - 连接表的全局条件
- python - 通过 max 函数赋值时变量的值发生变化
- php - 如何修复 PhpSpreadSheet 中的“公式错误:发生意外错误”?
- csv - 如何拆分具有 2 个标题行的多个 CSV 文件 - 有行限制
- python - 使用 Python 和 BeautifulSoup 为 Yahoo 和 Bing 生成 URL 抓取多个页面
- sdl - Hashlink hlsdl 无法创建窗口
- java - 在处理程序返回 null 的情况下如何避免流停止?