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

Я хочу реализовать нечто подобное с угловым разрешением. И с требованием контролировать элементное существование, мне нужно использовать угловую структурную директиву.

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

<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>

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

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

Ответ 1

Для всех входных имен должен быть указан префикс селектора директивы, за которым следует вводимое имя с заглавной буквы (т.е. permissionIfExcept). Пример:

  @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>

Обратите внимание, что здесь вы используете имя, следующее за префиксом некапитализированного (т.е. except). Также обратите внимание на : в назначении.

Явный синтаксис (с использованием template) будет выглядеть так:

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

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

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

Пример плунжера

См. Также источник NgFor в качестве примера.

Ответ 2

Ответ Günter Zöchbauer почти прав.

На самом деле прямо сейчас, чтобы заставить его работать, вам нужно явно переименовать вторичное имя @Input. Так должно быть:

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