文章/答案/技术大牛

发布

社区首页 >问答首页 >角嵌套路由中的多个布局(2+)

问角嵌套路由中的多个布局(2+)
EN

Stack Overflow用户

提问于 2017-02-16 19:45:06

回答 2查看 5K关注 0票数 6

我正在创建一个类似于应用程序的仪表板。我想用角图(2+)实现以下布局方案：

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

等等。

因此，基本上，我想做的是在一些(子)路由上完全替换<body>的内容。

这对我不好：multiple layout for different pages in angular 2，因为我不想将/ (root)重定向到像/home这样的任何地方。

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

任何帮助都会很好！

angular2-routing

angular

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-10-10 20:24:50

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

参见在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

票数 15

Stack Overflow用户

发布于 2017-02-16 20:21:05

好吧，我要试一试.

路由

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

如果您想直接为组件提供服务--这将是理想的，

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

直接问题您所面临的

三个问题，

将组件显示为子组件。
在称为全宽度的模板中显示组件
在名为中宽的模板中显示组件

在你的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

/full

/medium

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

所以既然登录是空白的。会出现在/blank里

/空白/BlankComonent.ts

另外，在每个目录中，您将创建一个路由文件，该文件在我们已经创建的初始路由文件中引用。

/空白/空白。

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

在中间同样的情况下，

/空白/空白。

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

FULL_ROUTES也是如此

为我们创建的每个目录创建一个路由文件。添加生活在同一个目录中并将共享同一个母模板的所有路由。

然后我们将创建一个模板目录。叫它/layouts

现在，在这个direcotry中，您将在这里创建

BlankComponent.ts FullComponent.ts MediumComponent.ts

这些组件中的每一个都将在这些模板中提供相应的路由服务。因为请记住，我们的第一个routes文件说，我们将向这些templates提供所有的Child Routes。

所以布局将提供给router-outlet

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

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42283235

复制

相似问题

问角嵌套路由中的多个布局(2+)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角嵌套路由中的多个布局(2+)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角嵌套路由中的多个布局(2+)
EN