javascript - 全局功能可通过所有应用程序使用 Angular2

Question

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

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) {

    }
}

ma​​in.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 的方法需要将其注入(inject)到组件构造函数中。在模板中是像这样使用

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

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

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

Answer 1

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

platformBrowserDynamic().bootstrapModule(AppModule);

在“AppModule”类(或您的情况下的任何类)中，您应该能够以这种方式添加全局服务提供者:

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

通过这种方式，MyGlobalService 可用于所有其他组件。

希望这对某人有用:)。