複数の入力を持つ角構造ディレクティブの使用方法

Question

angular-permisssionと同様のものを実装したいと思います。要素の存在を制御する必要がある場合は、角度structural directiveを使用する必要があります。冒頭

は、私はそのような構文が働くだろうと思う：

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

しかし、それはそのように動作しません。

さらに、オフィシャルガイドでは、シングル入力でカスタム構造ディレクティブを作成する方法のみを説明しています。 マルチ入力では、サードパーティ製のチュートリアルにはちょっとしたことがあります。しかし、これは、データバインディングを達成するために角型テンプレートのマイクロシンタックスを使用しています。そして、一つの問題が発生します。愚かな一時的な解決策が役に立たを追加で

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

：

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

それはこのに展開（違法です）： テンプレートの構文は、純粋なキーと値の入力をサポートしていません。変数宣言。

もう1つの不便な方法は、コードをラップするためにテンプレート要素を使用することです。

<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>と、それはあなたが答えるhttps://github.com/angular/angular/blob/d4d3782d455a484e8aa26ec9a57ee2b4727bc1da/modules/%40angular/common/src/directives/ng_for.ts