So wird das Host-DOM-Element in der Anweisung angular 2 bedingt eingefügt / entfernt

8

Ich möchte eine Direktive erstellen, die entscheidet, ob das Host-Element auf der Seite erscheinen soll oder nicht. Idealerweise möchte ich, dass das Element aus dem DOM entfernt wird und nicht nur mit css versteckt / angezeigt wird. Usecase ist:

%Vor%

Es würde UserService verwenden, um currentUser-Rollen zu erhalten, und wenn dort kein admin vorhanden ist, wird li entfernt.

Ich nehme an, ich könnte den gleichen Effekt mit ng-if erreichen (wenn es noch in angular 2 verfügbar ist), indem ich den Ausdruck an die Hauptkomponente übergebe. Aber mit der Direktive ist es semantischer und eleganter.

Ist es möglich?

%Vor%

Ich hätte das leicht in Winkel 1 tun können (die compile -Funktion der inneren Anweisung), aber wie kann ich das in Angular 2 machen?

    
dKab 24.12.2015, 07:42
quelle

2 Antworten

5

Diese Implementierung wird ähnlich wie die ngIf-Richtlinie sein. Und der Angular Leitfaden für strukturelle Richtlinien (den Sie ebenfalls erstellen möchten) gibt ein Beispiel von myUnless , das ngIf nur umkehrt.

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

%Vor%

Und benutze es wie:

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

    
Chandermani 24.12.2015 08:50
quelle
1

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

Aber wenn Sie wirklich darauf bestehen, Ihre eigene Direktive zu verwenden, glaube ich, ElementRef ist der Weg zu gehen. Auch wenn ich nicht empfehlen würde, dies zu verwenden

Sie werden so etwas bekommen:

%Vor%     
PierreDuc 24.12.2015 08:15
quelle