javascript - 在 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，所以如果我有授权​​状态，我只呈现没有标题和侧边栏的登录表单。

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

问题

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

Answer 1

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

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