1

我正在开发一个 Angular 2 (rc-4) 指令，它将检查是否可以在当前用户权限下查看组件并相应地显示/隐藏组件。

我在组件初始化时创建了组件标识符。例如，在profile.component.ts中，我正在为 ProfileComponent ( elementId:string;)生成 id

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 指南创建了一个结构指令。

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>

此设置有效。但我想从关联组件的变量中获取组件 id，而不是在 html 标记中对其进行硬编码。有没有办法可以从我的指令 (RestrictDirective) 访问我的组件 (ProfileComponent) 中的变量？

4

0 回答 0