Comment utiliser la directive structurelle d'Angular avec des entrées multiples ?

Question

Je veux mettre en œuvre quelque chose de similaire avec angular-permisssion . Et pour contrôler l'existence de l'élément, j'ai besoin d'utiliser angular. directive structurelle .

Au début, je pense qu'une telle syntaxe fonctionnerait :

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

Cependant, cela ne fonctionne pas de cette façon.

De plus, le guide officiel ne vous apprend qu'à écrire une directive structurelle personnalisée avec une seule entrée. Avec des entrées multiples, certains tutoriels tiers impliquent un peu. Mais il s'agit d'utiliser la micro-syntaxe des modèles angulaires pour réaliser la liaison des données. Un problème survient alors : la syntaxe template ne supporte pas les entrées de type clé-valeur :

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

Il s'étend à cela (ce qui est illégal) :

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

Une solution temporaire stupide consiste à ajouter une déclaration de variable inutile.

<h2 *permissionIf="let i;except: map.exceptonly: 'test'">Except</h2>

Un autre moyen peu pratique consiste à utiliser un élément de modèle pour envelopper le code.

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

Tout ce qui précède n'est pas suffisamment acceptable. Mais je ne peux pas trouver une meilleure façon de résoudre le problème.

J'espère que certains pourront me donner des conseils :).

Answer 1

Les noms des entrées doivent tous être préfixés par le sélecteur de la directive, suivi du nom de l'entrée. capitalisé (c'est-à-dire permissionIfExcept ). Exemple :

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

Pour les utiliser avec la syntaxe '*' :

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

Notez qu'ici vous utilisez le nom qui suit le préfixe non capitalisé (c'est-à-dire except ). Notez également le : dans l'affectation.

La syntaxe explicite (utilisant template ) ressemblerait à ceci :

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

mais avec <ng-container> cela pourrait ressembler à

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

Exemple de Plunker

Voir également le source de NgFor à titre d'exemple.

Answer 2

La réponse de @Günter Zöchbauer est presque correcte.

En fait, pour que sa réponse fonctionne, vous devez renommer explicitement le nom de l'@Input secondaire. Ce devrait donc être :

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

Answer 3

Un problème se pose alors : la syntaxe des modèles ne prend pas en charge les entrées de type clé-valeur pures :

Véritable

Une solution temporaire stupide consiste à ajouter une déclaration de variable inutile.

Je pense que tu utilises ça d'une manière qui n'est pas censée l'être.

Dans la documentation :

L'analyseur microsyntaxique met en titre toutes les directives et les fait précéder du nom de l'attribut de la directive, tel que ngFor. Par exemple, les propriétés d'entrée ngFor, of et trackBy, deviennent respectivement ngForOf et ngForTrackBy. C'est ainsi que la directive apprend que la liste est heroes et que la fonction track-by est trackById.

https://angular.io/guide/structural-directives#microsyntax-examples

En résumé, dans le contexte de votre question, la microsyntaxe accepte les "expressions", suivies par des "expressions clés" facultatives et je crains que ce ne soient là vos seules options.

On peut bien sûr passer un objet comme première expression - comme dans ngIf-, la différence étant que vous pouvez apprendre à votre directive comment évaluer l'expression :

*permissionIf="{ only: 'whatever', except: ['things', 'stuff'] }"