如何从指令中读取组件变量?

时间:2016-08-01 08:27:21

标签: angular angular2-directives angular2-components

我正在开发一个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)中的变量?

0 个答案:

没有答案