Question

我有一个PermissionService，它提供用户角色。如果用户与角色不对应，则不会上载服务器端数据。后端是用asp.net web api编写的，它将使用属性来保护数据。在上传页面上将是静态上传用户角色，这个想法只是为了显示或隐藏页面上依赖于用户角色的元素。 PermissionsService检查其数组中的可用角色。有像isSeller（），isManager（）这样的方法。我想要的只是从每个视图提供可访问性。现在我有了这个实现。

permission.service

import { Injectable }  from "@angular/core";

export enum Roles {
    Admin,
    Manager,
    Moderator,
    Seller
}

interface IPermissionDictionary {
    [key: string]: boolean;
}

@Injectable()
export class PermissionService {
    private permissions: IPermissionDictionary = {};

    public constructor() {
        this.emitPermissions();
    }

private emitPermissions(): void {        
    let selector = document.querySelectorAll("#roles > span");
    let availableRoles = Array.from(selector).map(element => element.textContent);

    for (let role in Roles) {
        if (!/^\d+$/.test(role)) { // for strings types in Roles
            this.permissions[role] = availableRoles.indexOf(role) > -1;
        }
    }
}

public isInRole(role: string): boolean {
    return this.permissions[role];
}

public isAdmin() {
    return this.isInRole(Roles[Roles.Admin]);
}

public isSeller() {
    return this.isInRole(Roles[Roles.Seller]);
}

public isManager() {
    return this.isInRole(Roles[Roles.Manager]);
}

public isModerator() {
    return this.isInRole(Roles[Roles.Moderator]);
}
}

app.component

import { Component } from "@angular/core";
import { ROUTER_DIRECTIVES } from "@angular/router";

import { PermissionService } from "./share/permission.service";
import { HomeComponent } from "./home/home.component";
import { OrderComponent } from "./order/order.component";

@Component({
    selector: "admin-panel",
    templateUrl: "../app/app.template.html",
    directives: [ROUTER_DIRECTIVES],
    precompile: [HomeComponent, OrderComponent]
})

export class AppComponent {
    constructor(private permissionService: PermissionService) {

    }
}

main.ts

import { bootstrap }    from "@angular/platform-browser-dynamic";
import { AppComponent } from "./app.component";
import { APP_ROUTES_PROVIDER } from "./app.routes";
import { HTTP_PROVIDERS } from '@angular/http';
import { PermissionService } from "./share/permission.service";
bootstrap(AppComponent, [APP_ROUTES_PROVIDER, HTTP_PROVIDERS, PermissionService]);

现在要访问PermissionService的方法需要在组件构造函数中注入它。在模板中使用就像

<div *ngIf="permissionService.isAdmin()">will show if you are admin</div>

但每次在我想要使用的每个组件中注入我的服务对我来说似乎很奇怪。我只想从我的应用程序的每个部分访问它，如：

<div *ngIf="isAdmin()">will show if you are admin</div>

Answer 1

我认为提出这个问题的人有另一个版本的Angular2（也许是预发行版？），但在最新版本中，如果您需要为所有应用程序导出服务，请按以下方式执行。首先，在你的main.ts中，你必须有一个你引导的类，如下所示：

platformBrowserDynamic().bootstrapModule(AppModule);

在这个班级＆＃34; AppModule＆＃34; （或者在您的情况下是什么），您应该能够以这种方式添加全球服务提供商：

...
import {GlobalService} from './global-service.service'
@NgModule({
...
providers: [MyGlobalService],
...
})
export class AppModule{ ...}

这样MyGlobalService可用于所有其他组件。

希望这对某人有用：）。

Answer 2

一些选项可能是使用权限方法创建顶级超类，然后在视图.ts中创建子类。不确定这是否适合您，因为您仍需要将超类导入组件并进行扩展。它也可以违反＆＃34; is-a＆＃34;。

通过所有应用Angular2提供全局功能

2 个答案: