Angular 嵌套路由中的多个布局 (2+) [英] Multiple layouts in nested routes in Angular (2+)
问题描述
我正在创建一个类似仪表板的应用程序.我想在 Angular (2+) 中实现以下布局计划:
I'm creating a Dashboard like application. I'd like to achieve the following layout plan in Angular (2+):
- 路线 - 名称 - 布局
- /- 主页 - 带有表格和图表等的全宽布局
- /reports - 报告页面 - 具有更多表格等的相同全宽布局
- /login - 登录页面 - 没有全宽布局，只有屏幕中心的简单登录表单
- /signup - 注册页面 - 没有全宽布局，只有屏幕中心的简单注册表
- /messages - 电子邮件 - 全宽布局
- /messages/new - 新电子邮件 - 中等布局，不继承全宽布局
等等...
所以基本上我想做的是在某些(子)路由上完全替换 的内容.
So basically what I'd like to do is to completely replace the contents of <body> at some (child) routes.
这对我不利:针对不同的多个布局角度 2 中的页面，因为我不想将/(root)重定向到/home 之类的任何地方.
This is not good for me: multiple layout for different pages in angular 2 because I don't want to redirect / (root) to anywhere like /home.
这个也不适合:如何在 Angular2 中切换布局
任何帮助都会很棒！
推荐答案
您可以使用子路由解决您的问题.
You can solve your problem using child routes.
在 https://angular-multi-layout-example.stackblitz.io 上查看工作演示/ 或在 https://stackblitz.com/edit/angular-multi 进行编辑-布局示例
如下设置路线
const appRoutes: Routes = [
//Site routes goes here
{
path: '',
component: SiteLayoutComponent,
children: [
{ path: '', component: HomeComponent, pathMatch: 'full'},
{ path: 'about', component: AboutComponent }
]
},
// App routes goes here here
{
path: '',
component: AppLayoutComponent,
children: [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'profile', component: ProfileComponent }
]
},
//no layout routes
{ path: 'login', component: LoginComponent},
{ path: 'register', component: RegisterComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
推荐参考:http:///www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html
这篇关于Angular 嵌套路由中的多个布局 (2+)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
