Vyhledávání na webu

javascript - Globální funkce dostupná v celé aplikaci Angular2

Mám PermissionService, který poskytuje uživatelské role. Na straně serveru data nebudou nahrána, pokud uživatel neodpovídá roli. Back-end je napsán pomocí asp.net web api, které bude používat atributy pro zabezpečení dat. Na stránce pro nahrávání budou statické uživatelské role pro nahrávání, myšlenka je jen zobrazit nebo skrýt prvky na stránce, které závisí na uživatelské roli. PermissionsService kontroluje dostupnou roli ve svém poli. Jsou zde metody jako isSeller(), isManager(). A vše, co chci, je poskytovat přístupnost z každého pohledu. Prozatím mám tuto implementaci.

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.komponenta

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

Prozatím je pro přístup k metodě PermissionService potřeba ji injektovat do konstruktoru komponenty. A v šabloně se používá takto

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

Ale pokaždé vkládat moji službu do každé komponenty, kde ji chci použít, mi přijde divné. A já jen chci mít k ní přístup z každé části mé aplikace, jako:

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

Odpověď č. 1

Myslím, že osoba, která položila tuto otázku, má jinou verzi Angular2 (možná předběžnou verzi?), ale v nejnovější verzi, pokud potřebujete službu exportovat pro celou aplikaci, děláte to následujícím způsobem. Nejprve musíte mít ve svém souboru main.ts třídu, kterou bootstrapujete, takto:

platformBrowserDynamic().bootstrapModule(AppModule);

V této třídě „AppModule“ (nebo jakékoli jiné ve vašem případě) byste měli být schopni přidat globálního poskytovatele služeb tímto způsobem:

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

Tímto způsobem je MyGlobalService dostupná pro všechny ostatní komponenty.

Doufejme, že to někomu bude užitečné :).

Odpověď č. 2

Jednou z možností by mohlo být vytvoření hlavní nadtřídy s metodami oprávnění a poté jen podtřídit v souboru view .ts. Nejsem si jistý, zda vám to vyhovuje, protože stále potřebujete importovat nadtřídu do svých komponent a rozšířit ji. Může to také porušovat princip "is-a".

Související články