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

【问题标题】：Manage different base layouts in Angular2在 Angular2 中管理不同的基本布局
【发布时间】：2017-09-14 03:05:53
【问题描述】：

在带有 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 路由器中管理基本布局？

【问题讨论】：

你需要遵循像 header.sidebar 这样的 nestead 声明的概念
什么意思？

标签： javascript angularjs angular typescript angular-ui-router

【解决方案1】：

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

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

【讨论】：