我正在开发一个Angular 2(rc-4)指令,该指令将检查是否可以在当前用户权限下查看组件并相应地显示/隐藏组件。
我在初始化组件时创建了组件标识符。例如,在 profile.component.ts 中,我正在为ProfileComponent生成id(elementId:string;
)
import {Component, Input} from "@angular/core";
@Component({
moduleId: module.id,
selector: 'app-profile',
templateUrl: 'profile.component.html',
styleUrls: ['profile.component.css'],
directives: []
})
export class ProfileComponent {
@Input('parent-id') parentId:string = "app";
elementId:string;
constructor(){}
ngOnInit() {
this.elementId = this.parentId + ".profile";
}
}
我在Angular 2 guide之后创建了一个结构指令。
import {Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
@Directive({
selector: '[restrict]'
})
export class RestrictDirective {
authMatrix:any = {
"guest": {
"app.dashboard.calendar": false,
"app.dashboard.profile": false
},
"user": {
"app.dashboard.calendar": false,
"app.dashboard.profile": true
},
"admin": {
"app.dashboard.calendar": true,
"app.dashboard.profile": true
}
};
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef
) {}
@Input() set restrict(elementId: string) {
let user:string = "admin"; // TODO get current logged in user
let grant:boolean = this.authMatrix[user][elementId]; // TODO user authority service
if (!grant) {
this.viewContainerRef.createEmbeddedView(this.templateRef);
} else {
this.viewContainerRef.clear();
}
}
}
因此,为了阻止或允许组件,我需要将该组件的id传递给该指令。目前,我已将组件ID(&#34; app.dashboard.profile&#34;)硬编码到指令输入,如下所示,
<app-profile *restrict="'app.dashboard.profile'" [parent-id]="elementId" ></app-profile>
此设置有效。但我希望从关联组件的变量中获取组件ID,而不是在html标记中对其进行硬编码。有没有办法可以从我的指令(RestrictDirective)访问我的Component(ProfileComponent)中的变量?