Chỉ thị hoạt động như ng-if (Góc 2)

Question

Tôi đang cố gắng tạo một chỉ thị hoạt động như một ngNếu kiểm soát nếu người dùng có quyền chính xác cho phép xem nội dung cụ thể, như sau:

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

tôi đã đọc về làm thế nào để làm điều đó và tìm thấy trên doc này về "Attribute Chỉ thị", nhưng tôi vẫn không thể thực hiện nó (tôi mới với góc 2)

cho đến nay tôi có điều này:

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; 
    } 

} 

Tôi đã thêm chỉ thị trong app.module.

Mọi lời khuyên về cách tiến hành sẽ tuyệt vời.

Answer 1

Sau một số nghiên cứu khác, tôi đã tìm thấy một tài liệu tuyệt vời về cách xây dựng chỉ thị tùy chỉnh, cụ thể theo cách tôi cần, hoạt động như một chỉ thị ngIf. Bạn có thể đọc về nó here và xem plunkr here

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(); 
    } 

    } 

}