Comment conditionnelle, d'insérer ou de retirer de l'hôte de l'élément DOM angulaire 2 de la directive

Je veux créer une directive qui décidera s'il convient ou non de son hôte élément apppear sur la page. Idéalement, je voudrais, pour supprimer l'élément du DOM et pas juste cacher/montrer avec les css. Cas d'utilisation:

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

Elle serait d'utiliser UserService pour obtenir currentUser rôles et si il n'y a pas admin il le li serait supprimé.

Je suppose que je pourrais obtenir le même effet avec ng-if (si elle est toujours disponible dans angulaire 2) en passant l'expression de evaulate dans le composant principal. Mais avec la directive, il est plus sémantique et élégant.

Est-il possible?

import {Directive} from 'angular2/angular2';

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

J'aurais pu facilement le fait que dans angulaire 1 (à l'intérieur de la directive compile fonction), mais comment puis-je faire dans Angulaire 2?

J'ai ajouté une directive dans mon dépôt github ici, github.com/IbraheemAlSaady/angular-role-restrict-directive/tree/... le code est un peu différent de ce que vous voulez, mais il pourrait vous aider à construire votre propre.

OriginalL'auteur dKab | 2015-12-24

  1. 5

    Cette mise en œuvre sera similaire à ce que ngIf directive. Et l'angle guide pour structurels directives (que vous envisagez de créer trop) donne un exemple de myUnless qui vient de s'inverse ngIf.

    Vous de la mise en œuvre pour l'accès sera semblable à la myUnless mise en œuvre.

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

    Et de l'utiliser comme:

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

    OriginalL'auteur Chandermani

  2. 1

    Suppression d'un élément du DOM est fait avec le *ngIf directive.

    Mais si vraiment vous insistez sur l'utilisation de votre propre directive, je crois ElementRef est le chemin à parcourir. Même si je ne serais pas des conseils sur l'utilisation de cette

    Vous obtiendrez quelque chose comme ceci:

    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);
       }
   }
}
    pourquoi conseillez-vous de ne pas le faire?
    parce que, dans une chose si simple que cela, *ngIf est de manière plus intuitive, et laisse le DOM de montage angulaire
    J'ai besoin d'accéder à la valeur de la access attribut, mais dans le constuructor il n'est pas encore disponible - c'est undefined
    J'ai éditer ma réponse. Je crois que vous devez utiliser le ngOnInit fonction. Ceci est appelé après le constructeur et après attribut de liaison a fini
    L'Attribut de la Directive guide met en garde contre direct de manipulation du DOM, par exemple, l'utilisation de removeChild(): "Manipuler le DOM est une pratique on préfère éviter parce que c'chaînes de nous le navigateur API DOM... La phase de rendu peut être déchargé à un Web Worker pour des performances plus rapides. Notre directive pourrait fonctionner lorsque nous avons lancé l'application en dehors du navigateur, peut-être sur le serveur de pré-phase de rendu."

    OriginalL'auteur PierreDuc