web-dev-qa-db-fra.com

Comment utiliser Angular angulaire avec plusieurs entrées

Je veux implémenter quelque chose de similaire avec angular-permisssion . Et avec l'obligation de contrôler l'existence de l'élément, je dois 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 vous apprend uniquement comment écrire une directive structurelle personnalisée avec une seule entrée. Avec les entrées multiples, certains didacticiels tiers impliquent un peu. Mais cela utilise la micro-syntaxe du modèle angular pour obtenir la liaison de données. Ensuite, un problème se produit: la syntaxe du modèle ne prend pas en charge les entrées de valeur-clé pure:

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

Il se développe dans ce qui est illégal:

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

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

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

Une autre façon peu pratique consiste à utiliser l'élément de modèle pour envelopper le code.

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

Ce qui précède n'est pas assez acceptable. Mais je ne trouve pas de moyen de le résoudre.

J'espère que certains gars peuvent donner une suggestion :).

javascriptangulardirective
33
e-cloud

Les noms d'entrée doivent tous être préfixés avec le sélecteur de la directive, suivi du nom d'entrée en majuscule (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 ici que vous utilisez le nom suivant le préfixe non capitalisé (c'est-à-dire except). Notez également le : dans l'affectation.

La syntaxe explicite (en utilisant template) ressemblerait à ceci:

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

mais avec <ng-container> ça pourrait ressembler

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

Exemple Plunker

Voir aussi le source de NgFor comme exemple.

44
Günter Zöchbauer

@ 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 @Input secondaire. Il devrait donc être:

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