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模块，它们使用带有标题和侧边栏的基本布局以及不使用任何基本布局的登录功能。

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

在Angular2

1 个答案: