web-dev-qa-db-ja.com

ng-ifとして機能するディレクティブ（Angular 2）

正しい権限を持つユーザーが特定のコンテンツを表示できるかどうかを制御する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 「属性ディレクティブ」についてですが、それでも実装できません（私は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にディレクティブを追加しました。

どのように進めるかについてのアドバイスは素晴らしいでしょう。

angulartypescriptangular2-directives
12
Daniel Soublett

さらに調査した結果、ngIfディレクティブとして機能するカスタムディレクティブ、特に必要な方法を構築する方法についてのすばらしいドキュメントを見つけました。あなたはそれについて読むことができます ここ そしてplunkrを見ることができます ここ

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

@Directive({
  selector: '[isAllow]'
})

export class isAllowDirective {

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  @Input() set isAllow(allow: boolean){
    if (allow) {
      // If condition is true add template to DOM
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
     // Else remove template from DOM
      this.viewContainer.clear();
    }

  }

}
12
Daniel Soublett

受け入れられた回答は、angularの*ngIf実装を使用していません。

それを使用するカスタム*ngIfディレクティブを作成しました： http://avenshteinohad.blogspot.com/2018/06/custom-ngif-directive.html

5
ohadinho