すべてのアプリで使用可能なグローバル関数Angular2

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

WはPermissionServiceのメソッドにアクセスするためにコンポーネントコンストラクタにそれを挿入する必要があります。テンプレートでは次のような使い方があります

しかし、私が使用したいと思っている各コンポーネントに私のサービスを注入するたびに、私は奇妙に思えます。そして、私は同じように私のアプリのあらゆる部分からのアクセスを取得したい：

<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には、他のすべてのコンポーネントに使用可能です。

これは誰かにとって役に立ちます:)。

Answer 2

いくつかのオプションは、権限メソッドを使用してトップレベルのスーパークラスを作成し、次にビュー.tsでサブクラス化することができます。スーパークラスをコンポーネントにインポートして継承する必要がある場合は、これが適切かどうかは不明です。それはまた「is-a」に違反する可能性があります。