Question

我有一个具有以下路线的应用程序

import { Routes, RouterModule } from '@angular/router';
import { Layout } from './layout.component';
import { AuthGuard } from './../authentication/authentication.guard'
import { AuthorizationGuard } from './../authentication/authorization.guard'

const routes: Routes = [
  {
    path: '', component: Layout, children: [
        { path: '', redirectTo: 'pricingreview', pathMatch: 'full' },
        { path: 'pricingreview', canActivate: [AuthorizationGuard], data: { area: 'Pricing Review' }, loadChildren: () => System.import('../pricingreview/pricingreview.module') },
        { path: 'storelists', canActivate: [AuthorizationGuard], data: { area: 'Store Lists' }, loadChildren: () => System.import('../storelists/storelists.module') },
        { path: 'authorizations', canActivate: [AuthorizationGuard], data: { area: 'Authorizations' }, loadChildren: () => System.import('../authorizations/authorizations.module') },
        { path: 'funding', canActivate: [AuthorizationGuard], data: { area: 'Funding' }, loadChildren: () => System.import('../funding/funding.module') },
        { path: 'myhistory', canActivate: [AuthorizationGuard], data: { area: 'My History' }, loadChildren: () => System.import('../myhistory/myhistory.module') },
        { path: 'allhistory', canActivate: [AuthorizationGuard], data: { area: 'All History' }, loadChildren: () => System.import('../allhistory/allhistory.module') },
        { path: 'analytics', canActivate: [AuthorizationGuard], data: { area: 'Analytics' }, loadChildren: () => System.import('../analytics/analytics.module') },
        { path: 'users/:department', canActivate: [AuthorizationGuard], data: { area: 'User Management' }, loadChildren: () => System.import('../users/users.module') },
        { path: 'callpoints', canActivate: [AuthorizationGuard], data: { area: 'CallPoint Management' }, loadChildren: () => System.import('../callpoints/callpoints.module') },
        { path: 'products', canActivate: [AuthorizationGuard], data: { area: 'Product Management' }, loadChildren: () => System.import('../products/products.module') },
        { path: 'pricingmanagement', canActivate: [AuthorizationGuard], data: { area: 'Pricing Management' }, loadChildren: () => System.import('../pricingmanagement/pricingmanagement.module') },
    ]
  }
];

export const ROUTES = RouterModule.forChild(routes);

所有这些路由都包含一个Guard，阻止访问路由本身。我有一个偶尔轮询的服务来获取访问信息，因此用户可以在路线上并失去访问权限。我想将* ngIf包装器添加到路径的模板中，如此

<div *ngIf="ctx.userInRole([route.data.value.area])">
       I have Access
</div>
<div *ngIf="!ctx.canEdit(route.data.value.area)">
       You No Longer Have Access to this Area
</div>

有没有办法在不这样做的情况下为每条路线添加类似的包装？我猜我需要一个可以传递模板的指令吗？

Answer 1

您可以创建一个包装器组件

@Component({
  selector: 'access-wrapper',
  template: `
    <div *ngIf="ctx.userInRole([route.data.value.area]) | async">
       <ng-content></ng-content>
    </div>
    <div *ngIf="!ctx.canEdit(route.data.value.area) | async">
       You No Longer Have Access to this Area
    </div>
})
class AccessWrapperComponent { 
  constructor(public ctx:AccessService, public route:ActivatedRoute) {}
}

并像

一样使用它

<!-- template of the component added by the router>
<access-wrapper>
  <div> this is the visible content of the component</div>
</access-wrapper>

当ctx.userInRole()返回true时，可见内容将被转换。

我使用了| async管道，因为你应该避免轮询。该服务应该提供Observable组件，可以在发生更改时订阅获得通知。另请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

用* ngIf Angular 2

1 个答案: