Wie Sie Host-DOM-Element in Angular 2 Direktive

Question

konditional einfügen/entfernen Ich möchte eine Direktive erstellen, die entscheidet, ob sein Host-Element apppear auf der Seite sein sollte oder nicht. Idealerweise möchte ich, dass das Element aus dem DOM entfernt wird und nicht nur mit css versteckt/angezeigt wird. Usecase ist:

<ul role="navigation"> 
    <li><a>public link</a></li> 
    <li><a>public link2</a></li> 
    <li access="admin"><a>admin-only link</a></li> 
</ul> 

Es Userservice verwenden würde current Rollen zu bekommen und wenn es keine Admin dort die li würde entfernt werden.

Ich vermute, ich könnte den gleichen Effekt mit ng-if erreichen (wenn es noch in Winkel 2 verfügbar ist), indem Sie den Ausdruck in der Hauptkomponente zu bewerten. Aber mit der Richtlinie ist es semantischer und eleganter.

Ist es möglich?

import {Directive} from 'angular2/angular2'; 

@Directive({ 
    selector: 'access' 
}) 
export class Access { 
//what goes here 
} 

ich einfach, dass in Winkel 1 getan haben könnte (innen compile Funktion der Richtlinie), aber wie kann ich dies tun in Angular 2?

Answer 1

Das Entfernen eines Elements aus dem DOM erfolgt mit der Direktive *ngIf.

Aber wenn Sie wirklich darauf bestehen, Ihre eigene Richtlinie zu verwenden, glaube ich, ElementRef ist der Weg zu gehen. Auch wenn ich nicht auf die Nutzung dieser

Rat würden Sie so etwas wie dieses:

import {Directive} from 'angular2/angular2'; 

@Directive({ 
    selector: '[access]' //this is how you address an attribute directive 
}) 
export class Access { 
    constructor(private _userService : UserService, private _elementRef : ElementRef) {} 

    ngOnInit() { 
     this._checkAdmin(); 
    } 

    private _checkAdmin() : void { 
     if(!this._userService.currentUser.hasRole('admin')) { 
      let el : HTMLElement = this._elementRef.nativeElement; 
      el.parentNode.removeChild(el); 
     } 
    } 
} 

Answer 2

Diese Implementierung ähnlich sein wird, was ngIf Richtlinie ist. Und das Angular guide for structural directives (das Sie auch erstellen möchten) gibt ein Beispiel von myUnless, das gerade ngIf umkehrt.

Ihre Implementierung für den Zugriff ähnelt der myUnless Implementierung.

@Directive({ selector: '[access]' }) 
export class AccessDirective { 
    constructor(
    private _templateRef: TemplateRef, 
    private _viewContainer: ViewContainerRef 
    ) { } 
    @Input() set myUnless(condition: boolean) { 
    if (condition) { 
     this._viewContainer.createEmbeddedView(this._templateRef); 
    } else { 
     this._viewContainer.clear(); 
    } 
    } 
} 

Und verwenden Sie es mögen:

<li *access="isAdmin"><a>admin-only link</a></li>