在Angular2中管理不同的基本布局

Question

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

$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应用程序路由配置：

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

]。

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

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

题

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

Answer 1

我找到了一种适用于我管理基本布局的方法： https : //stackblitz.com/github/jbojcic1/angular-routing-example? file = src%2Fapp%2Flayout%2Flayout- routing.module.ts在此示例中，我具有FeatureA和FeatureB模块，这些模块使用带有标题和侧边栏的基本布局，以及不使用任何基本布局的登录功能。

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