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

在带有 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，所以如果我有授权​​状态，我只渲染登录表单，没有标题、侧边栏。

如果我有应用程序状态，我会渲染带有页眉、页脚、侧边栏等的 shell。

Question

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

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

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