Как использовать Угловую конструктивную директиву с несколькими входами

Question

Я хочу реализовать что-то подобное с angular-permisssion. И с требованием контролировать существование элемента, мне нужно использовать угловой structural directive.

В начале, я думаю, что такой синтаксис будет работать:

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

Однако, это не работает.

Кроме того, официальное руководство только научит вас писать индивидуальную структурную директиву с одним входом. С несколькими входами некоторые сторонние учебники связаны с бит. Но для достижения привязки данных используется микро-синтаксис углового шаблона. Тогда одна проблема возникает: синтаксиса шаблона не поддерживает чистый ключ-значение входа:

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

он расширяется в это (что является незаконным):

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

Глупое временное решение добавить бесполезно объявление переменной.

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

Другим неудобным способом является использование элемента шаблона для обертывания кода.

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

Все вышеперечисленное не обладает достаточной степенью защиты. Но я не могу найти способ его решения.

Надеюсь, что некоторые ребята могут дать какое-то предложение :).

Answer 1

Имена входных нужно все с префиксом селекторе директивы:

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

и использовать его как

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

пожалуйста не : для выполнения задания.

Явная форма будет выглядеть

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

но <ng-container> это может выглядеть

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

Plunker example

Смотрите также источник NgFor как например https://github.com/angular/angular/blob/d4d3782d455a484e8aa26ec9a57ee2b4727bc1da/modules/%40angular/common/src/directives/ng_for.ts