Angular(2+)中嵌套路由中的多个布局

Question

Angular(2+)中嵌套路由中的多个布局

pap*_*tis 4 angular2-routing angular

我正在创建一个类似于应用程序的仪表板.我想在Angular(2+)中实现以下布局计划:

路线 - 名称 - 布局
/ - 主页 - 带表格和图表的全宽布局等
/ reports - 报告页面 - 具有更多表格的相同全宽度布局等
/ login - 登录页面 - 没有全宽度布局,只是屏幕中心的简单登录表单
/ signup - 注册页面 - 没有全宽度布局,只是屏幕中心的简单注册表单
/ messages - 电子邮件 - 全宽布局
/ messages/new - 新电子邮件 - 中等布局,不从全宽布局继承

等等...

所以基本上我想做的是完全替换<body>某些(子)路由的内容.

这对我来说不好:角度为2的不同页面的多个布局,因为我不想将/(root)重定向到像/ home这样的任何地方.

这个也不适合:如何在Angular2中切换布局

任何帮助都会很棒!

Answer 1

Ram*_*ami 10

您可以使用子路径解决您的问题.

请参阅https://angular-multi-layout-example.stackblitz.io/上的工作演示或在https://stackblitz.com/edit/angular-multi-layout-example进行编辑

设置如下路线

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);

Run Code Online (Sandbox Code Playgroud)

推荐参考:http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html

归档时间：	9 年，3 月前
查看次数：	3717 次
最近记录：	8 年，7 月前