javascript - directives - angularjs directive scope

Cómo utilizar la directiva estructural angular con entradas múltiples.

Question

Quiero implementar algo similar con angular-permisssion . Y con el requisito de controlar la existencia del elemento, necesito usar una directiva estructural angular.

Al principio, creo que tal sintaxis funcionaría:

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

Sin embargo, no funciona de esa manera.

Además, la guía oficial solo le enseña cómo escribir directivas estructurales personalizadas con una sola entrada. Con entradas múltiples, algunos tutoriales de terceros implican un poco. Pero eso es utilizar la micro-sintaxis de la plantilla angular para lograr el enlace de datos. Entonces ocurre un problema: la sintaxis de la plantilla no admite entradas de valor clave puro:

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

Se expande en esto (lo cual es ilegal):

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

Una solución temporal estúpida es agregar una declaración de variable inútil.

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

Otra forma inconveniente es usar el elemento de plantilla para envolver el código.

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

Los anteriores no son suficientemente aceptables. Pero no puedo encontrar una manera mejor de resolverlo.

Espero que algunos chicos puedan dar alguna sugerencia :).

Answer 1

Los nombres de entrada deben estar todos prefijados con el selector de la directiva:

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

y usalo como

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

Por favor, no el : para la tarea.

La forma explícita se vería como

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

pero con <ng-container> podría verse como

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

Ejemplo de plunker

Vea también la fuente de NgFor como ejemplo https://github.com/angular/angular/blob/d4d3782d455a484e8aa26ec9a57ee2b4727bc1da/modules/%40angular/common/src/directives/ng_for.ts

Answer 2

Respuesta de @ Günter Zöchbauer es casi correcta.

De hecho, ahora mismo para hacer que su respuesta funcione, necesita cambiar explícitamente el nombre del @Input secundario. Entonces debería ser:

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