Javascript 通过所有应用程序2提供全局功能

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

权限。服务

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]);
}
}

应用程序组件

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>

将显示您是否是管理员

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

platformBrowserDynamic().bootstrapModule(AppModule);

在这个类“AppModule”（或您的案例中的任何内容）中，您应该能够以以下方式添加全局服务提供商：

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

这样，

MyGlobalService

就可用于所有其他组件

---

希望这对某人有用：）。

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

添加和

isAdmin（）{return permissionService.isAdmin（）}

到您的AppComponent工作吗？@Jackson是的，但是如果我想从例如product.component获得它，该怎么办？再次注入permissionService？您能找到解决方案吗？