Wie um bedingt einfügen/entfernen von host-DOM-element in den Winkel-2 Richtlinie

Ich möchte erstellen Sie eine Richtlinie, die wird entscheiden, ob Sie sollte oder sollte nicht Ihre host-element apppear auf der Seite. Idealerweise würde ich es gerne entfernen das element aus dem DOM und nicht nur ein - /ausblenden mit css. Anwendungsfall 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>

Würde es UserService zu bekommen currentUser Rollen und, wenn es keine admin es die li entfernt werden würde.

Ich glaube, ich könnte den gleichen Effekt erzielen, mit ng-if (falls es noch erhältlich in den Winkel-2), indem der Ausdruck evaulate in die main-Komponente. Aber mit der Anwendung der Richtlinie, mehr semantische und elegant.

Ist es möglich?

import {Directive} from 'angular2/angular2';

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

Konnte ich habe leicht getan, im Winkel 1 (innere Richtlinie compile - Funktion), aber wie kann ich dies tun, im Winkel 2?

InformationsquelleAutor dKab | 2015-12-24
  1. 5

    Diese Umsetzung wird ähnlich zu dem, was ngIf-Richtlinie ist. Und die Eckige Handbuch für strukturelle Richtlinien (die Sie planen zu erstellen, zu) gibt ein Beispiel für myUnless dass gerade kehrt ngIf.

    Ihnen die Umsetzung für den Zugang wird ähnlich Aussehen wie die myUnless Umsetzung.

    @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 wie:

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

    InformationsquelleAutor Chandermani
  2. 1

    Entfernen Sie ein element aus der DOM ist fertig mit der *ngIf Richtlinie.

    Aber wenn Sie wirklich darauf bestehen, über die Verwendung Ihrer eigenen Richtlinie, glaube ich ElementRef ist der Weg zu gehen. Obwohl, ich würde keine Ratschläge, die auf die Verwendung dieser

    Bekommen 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);
       }
   }
}
    • warum raten Sie nicht, dies zu tun?
    • weil in eine so einfache Sache wie diese, *ngIf ist viel intuitiver, und verlässt das DOM Bearbeiten zu eckig
    • Ich brauche Zugriff auf den Wert der access Attribut, sondern in der constuructor ist es noch nicht verfügbar - es ist undefined
    • Ich habe mein edit beantworten. Ich glaube, Sie haben zu verwenden, die ngOnInit Funktion. Diese wird aufgerufen, nachdem der Konstruktor und nach dem Attribut binding-fertig
    • Das Attribut Richtlinie Reiseführer warnt davor, die direkte DOM-manipulation, z.B., die Verwendung von removeChild(): "die Manipulation des DOM-direkt ist eine Praxis, die wir lieber vermeiden, weil es Ketten, die uns zu den browser-DOM-API... Der rendering-phase könnte ausgelagert werden, um eine Web-Worker für höhere Leistung. Unsere Richtlinie könnte funktionieren, wenn wir liefen die Anwendung außerhalb des Browsers, vielleicht auf dem server in einer pre-render-phase".
    • Hatte die gleiche Frage und fand diese in der Winkel-docs. angular.io/docs/ts/latest/guide/structural-directives.html

    InformationsquelleAutor PierreDuc
Schreibe einen Kommentar