Question

我正在创建一个类似应用程序的仪表板。我想在Angular（2 +）中实现以下布局规划：

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

等...

所以基本上我想做的是在某些（子）路线上完全替换<body>的内容。

这对我不利：multiple layout for different pages in angular 2因为我不想将/（root）重定向到像/ home这样的地方。

这个不适合：How to switch layouts in Angular2

任何帮助都会很棒！

Answer 1

您可以使用子路线解决问题。

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

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

Answer 2

好的，我要试一试......

<强>路线

创建路线可以通过多种方式完成。您可以使用子路径或直接提供组件。

如果您想直接提供该组件，这将是理想的，

{ path: '*pathInURL*', component: *NameComponent* }

您面临的直接问题

三个问题，

将子组件显示为子组件。
在模板中显示名为fullwidth的组件
在名为mediumwidth的模板中显示组件

在 routes.ts

const APP_ROUTES: Routes = [
// landing page of your application
    { path: '', redirectTo: '/home', pathMatch: 'full', },
//anything that will be handled in blank template
    { path: '', component: BlankComponent, data: { title: 'blank Views' }, children: BLANK_ROUTES },
//anything that will be handled in fullwidth
    { path: '', component: FullComponent, data: { title: 'full Views' }, children: FULL_ROUTES },
// anything that will be handled in medium width
    { path: '', component: MediumComponent, data:{ title: 'Medium Views' }, children: MEDIUM_ROUTES }
];

这将转发URL中的所有路径以查看这些路由。它将检查路线以查看它将落入哪个模板。

然后创建3个目录。

/空白

/全

/介质

在这些文件夹中，您将保留使用每个母模板的组件。

因为登录是空白的。它将是/空白

/blank/BlankComonent.ts

同样在每个目录中，您将创建一个路径文件，该文件在我们已创建的初始路径文件中引用。

/blank/blank.routes.ts

export const BLANK_ROUTES: Routes = [
    { path: 'login', component: LoginComponent }
];

然后在媒介中同样的事情，

/blank/blank.routes.ts

export const MEDIUM_ROUTES: Routes = [
    { path: 'Some/Path', component: SomeMediumComponent }
];

然后同样适用于FULL_ROUTES

为我们创建的每个目录创建一个路由文件。添加所有位于同一目录中的路由，并共享相同的母模板。

然后我们将创建一个模板目录。称之为/布局

现在，在这个目标中，您将创建

BlankComponent.ts FullComponent.ts MediumComponent.ts

这些组件中的每一个都将在这些模板中提供相应的路径。因为请记住我们的第一个routes文件说我们会将Child Routes提供给这些templates。

因此布局将提供给router-outlet

import { Component } from '@angular/core';

@Component({
    selector: 'body',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent { 
}

Angular（2+）中嵌套路由中的多个布局

2 个答案: