web-dev-qa-db-ja.com

Angular複数入力の構造ディレクティブの使用方法

angular-permisssion と似たようなものを実装したい。そして、要素の存在を制御する必要があるため、angular structural directive を使用する必要があります。

最初は、このような構文が機能すると思います：

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

ただし、その方法では機能しません。

さらに、公式ガイドでは、単一の入力でカスタム構造ディレクティブを記述する方法のみを説明しています。複数入力の場合、一部のサードパーティのチュートリアルには少し関与します。しかし、それはangularテンプレートマイクロ構文を使用してデータバインディングを実現しています。1つの問題が発生します。テンプレート構文は純粋なキーと値の入力をサポートしていません。

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

上記のすべてが十分に受け入れられるわけではありません。しかし、私はそれを解決する方法を見つけることができません。

いくつかの人がいくつかの提案をすることができると思います:)。

javascriptangulardirective
33
e-cloud

入力名にはすべて、ディレクティブのセレクターの前に、入力名capitalized（つまり、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>

ここでは、プレフィックスuncapitalizedに続く名前を使用していることに注意してください（つまり、except）。また、:割り当て。

明示的な構文（templateを使用）は次のようになります。

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

しかし、<ng-container>次のようになります

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

プランカーの例

例としてNgForの-​​ source も参照してください。

44
Günter Zöchbauer

@GünterZöchbauerの答えはほぼ正しいです。

実際のところ、彼の答えを機能させるには、セカンダリ@Input名を明示的に名前変更する必要があります。したがって、次のようになります。

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