typescript 可通过所有应用程序 Angular2 使用的全局函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38896510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Global function available through all app Angular2
提问by unsafePtr
I have a PermissionService, which provide user roles. At the server-side data will not be uploaded if the user is not corresponds on role. The back-end is written with asp.net web api, which will use attributes to secure data. On upload page will be static upload user roles, the idea is just to show or hide elements on page which depending from user role. The PermissionsService check avaiable role in its array. There are methods like isSeller(), isManager(). And all what i want is to provide accessibility from each view. For now i have this implementation.
我有一个 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]);
For now to access the method of PermissionService need to inject it in component constructor. And in template is is use like
现在要访问 PermissionService 的方法需要将它注入到组件构造函数中。在模板中是使用像
<div *ngIf="permissionService.isAdmin()">will show if you are admin</div>
But every time to inject my service in each component where i want to use it seems for me strange. And i just want to get access it from every part of my app like:
但是每次在我想使用的每个组件中注入我的服务对我来说都很奇怪。我只想从我的应用程序的每个部分访问它，例如：
<div *ngIf="isAdmin()">will show if you are admin</div>
回答by ACBM
I think the person who asked this question has another version of Angular2 (perhaps a pre-release?), but in the latest version if you need to export a service for all the app you do it in the following way. First, in your main.ts you must have a class that you bootstrap, like this:
我认为问这个问题的人有另一个版本的 Angular2（也许是预发布版？），但在最新版本中，如果您需要为所有应用程序导出服务，请按以下方式进行。首先，在您的 main.ts 中，您必须有一个可以引导的类，如下所示：
platformBrowserDynamic().bootstrapModule(AppModule);
In this class "AppModule" (or whatever it is in your case), you should be able to add a global service provider in this way:
在这个“AppModule”类（或任何你的情况）中，你应该能够以这种方式添加一个全局服务提供者：
...
import {GlobalService} from './global-service.service'
@NgModule({
...
providers: [MyGlobalService],
...
})
export class AppModule{ ...}
In this way MyGlobalServiceis available for all other components.
这种方式MyGlobalService可用于所有其他组件。
Hopefully this will be useful to someone :).
希望这对某人有用:)。
回答by tomasz
Some option could be to create top level super class with the permission methods and then just subclass in view .ts. Not sure if this suits you as you still need to import super class into your components and extend it. It can also violate the "is-a".
一些选择可能是使用权限方法创建顶级超类，然后在视图 .ts 中创建子类。不确定这是否适合您，因为您仍然需要将超类导入到您的组件中并对其进行扩展。它也可能违反“is-a”。
