在Angular2中管理不同的基本布局 [英] Manage different base layouts in Angular2

问题描述

在带有ui.router的angularjs应用程序中，我可以执行以下操作:

In my angularjs application with ui.router I can do following:

$stateProvider
        .state('app', {
            url: '',
            abstract: true,
            template: '<div data-ui-view></div>'
        })
        .state('app.auth', {
            url: '',
            abstract: true,
            controller: 'AuthShellController as vm',
            templateUrl: 'views/auth/auth-shell-view.html'
        })
        .state('app.ui', {
            abstract: true,
            templateUrl: 'views/ui-shell-view.html',
            controller: 'ShellController as vm'

和我的angular2应用程序路由配置:

and my angular2 application routes config:

const appRoutes:Routes = <Routes>[
{
    path: '',
    component: DashboardComponent,
},
{
    path: 'login',
    component: LoginComponent,
},
{
    path: 'presentation',
    children: [{
        path: 'new',
        component: PresentationComponent
    }, {
        path: ':id',
        component: PresentationComponent
    }]
},

];

在angularjs中，我可以按状态解析相同的url，因此，如果我具有授权状态，则仅呈现登录表单而没有标题，侧边栏.

In angularjs I can resolve same url by states, so if I have authorization state I render just login form without header, sidebar.

如果我具有应用程序状态，则使用标题，页脚，侧边栏等渲染外壳.

If I have application state I render shell with header, footer, sidebar and so on.

问题

如何在angular2路由器中管理基本布局?

How can I manage base layouts in angular2 router?

推荐答案

我找到了一种适用于我管理基本布局的方法:

I found a way that works for me to manage base layouts: https://stackblitz.com/github/jbojcic1/angular-routing-example?file=src%2Fapp%2Flayout%2Flayout-routing.module.ts In this example I have featureA and featureB modules which use base layout with header and sidebar and login feature which doesn't use any base layout.

我唯一不喜欢的是，每次添加一个使用基本布局的新模块时，都需要修改该基本布局的路由文件，因为这违反了打开/关闭的原则.

The only thing I don't like here is that each time you add a new module which uses some base layout, you need to modify routing file for that base layout, because this violates open/closed principle.

这篇关于在Angular2中管理不同的基本布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！