作为ng-if的指令(Angular 2)

时间:2017-04-20 11:00:38

标签: angular typescript angular2-directives

我试图创建一个作为ngIf的指令来控制具有正确权限的用户是否允许查看特定内容,如下所示:

<div [type-of-user]="load data from the user and check it (normal or premium)">
    <h3>You are allow to see this.</h3>
</div>

我正在阅读有关如何操作并在doc上找到关于&#34;属性指令&#34;但我仍然无法实现它(我是Angular 2的新手)

到目前为止,我有这个:

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({
  selector: '[type-of-user]'
})

export class TypeOfUserDirective{

  constructor(private el: ElementRef){}

  @Input('type-of-user') userControl: string;

  private haspermission(permission: string) {
    /*the style background color is just to test if works*/
    this.el.nativeElement.style.backgroundColor = permission;
  }

}

我已经在app.module中添加了该指令。

任何建议如何进行都会很棒。

2 个答案:

答案 0 :(得分:11)

经过一些研究后,我找到了一个很好的文档,讲述了如何构建自定义指令,特别是我需要的方式,它充当了ngIf指令。您可以阅读here并查看plunkr here

>>>features=np.random.rand(150,4)
>>>features= np.append(features,np.random.randint(3,size=(150,1)),axis=1)
>>>target=np.array([0,1,2])
>>>plt.scatter(features[target == 1,0], features[target == 1,1], marker='o', c='r')

答案 1 :(得分:3)

可接受的答案未使用angular的*ngIf实现。

我编写了一个使用它的自定义*ngIf指令: http://avenshteinohad.blogspot.com/2018/06/custom-ngif-directive.html