1

現在のユーザー権限でコンポーネントを表示できるかどうかを確認し、それに応じてコンポーネントを表示/非表示にする 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) 内の変数にアクセスする方法はありますか?

4

0 に答える 0