在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模塊，這些模塊使用帶有標題和側邊欄的基本布局，以及不使用任何基本布局的登錄功能。

我在這里唯一不喜歡的是，每次添加使用基本布局的新模塊時，都需要修改該基本布局的路由文件，因為這違反了打開/關閉原則。