現在のユーザー権限でコンポーネントを表示できるかどうかを確認し、それに応じてコンポーネントを表示/非表示にする 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 (「app.dashboard.profile」) をハードコーディングしました。
<app-profile *restrict="'app.dashboard.profile'" [parent-id]="elementId" ></app-profile>
このセットアップは機能します。しかし、html タグにハードコーディングするのではなく、関連するコンポーネントの変数からコンポーネント ID を取得したいと考えています。ディレクティブ (RestrictDirective) からコンポーネント (ProfileComponent) 内の変数にアクセスする方法はありますか?