Wie verwenden Sie Winkelstrukturanweisung mit mehreren Eingängen

Question

Ich möchte etwas ähnliches mit angular-permisssion implementieren. Und mit der Anforderung, die Existenz des Elements zu kontrollieren, muss ich Winkel structural directive verwenden.

Zu Beginn, ich denke, solche Syntax funktionieren würde:

<h2 *permissionIf [permissionIfExcept]="'Read'">Except</h2> 

Es ist jedoch nicht auf diese Weise funktioniert.

Darüber hinaus lehren Sie die offizielle Anleitung nur, wie Sie benutzerdefinierte strukturelle Anweisung mit einem einzigen Eingang schreiben. Bei Multi-Inputs beinhalten einige Tutorials von Drittanbietern ein bisschen. Aber das verwendet die eckige Template-Micro-Syntax, um Datenbindung zu erreichen. Dann ein Problem auftritt: Template Syntax nicht rein Schlüssel-Wert-Eingänge unterstützt:

<h2 *permissionIf="except: map.except；only: 'test'">Except</h2> 

Es in diese erweitert (was illegal ist):

<h2 template="permissionIf except: map.except；only: 'test'">Except</h2> 

Eine dumme vorübergehende Lösung ist, eine nutzlose hinzufügen variable Aussage.

Eine weitere unbequeme Methode ist die Verwendung des Vorlagenelements zum Umbrechen des Codes.

<template permissionIf [permissionIfExcept]="'Read'"> 
    <h2>Except</h2> 
</template> 

Die oben genannten sind alle nicht ausreichend genug. Aber ich finde keinen besseren Weg, es zu lösen.

Hoffe, dass einige Jungs einen Vorschlag geben können :).

Answer 1

Die Eingangsnamen müssen alle mit dem Selektor der Richtlinie vorangestellt werden:

@Directive({ 
    selector: '[permissionIf]' 
    }) 
    export class PermissionIfDirective implements AfterContentInit { 

    private _permissionIf:string[]; 
    @Input() 
    set permissionIf(value: string[]) { 
     this._permissionIf=value; 
     console.log('permissionIf: ', value); 
    } 

    private _except:string; 
    @Input() 
    set permissionIfExcept(value: string) { 
     this._except = value; 
     console.log('except: ', value); 
    } 
    } 

und verwenden Sie es wie

<div *permissionIf="permissions;except:'Read'"></div> 

nicht bitte die : für die Zuordnung.

Die explizite Form wie

<template [permissionIf]="permissions" [permissionIfExcept]="'Read'"> 
    </div></div> 
</template> 

aber mit <ng-container> könnte es aussehen

<ng-container *permissionIf="permissions;except:'Read'"> 
    <div></div> 
</ng-container> 

Plunker example

Siehe auch die Quelle der NgFor als Beispiel https://github.com/angular/angular/blob/d4d3782d455a484e8aa26ec9a57ee2b4727bc1da/modules/%40angular/common/src/directives/ng_for.ts