angleの動的属性ディレクティブの大文字化

Question

私はアプリケーションを構築するためにAngular 2とIonic 2を使用しています。現在、私は動的なサイドメニューを構築しています。 IonicはmenuCloseという指示文を提供し、ボタンをクリックするとサイドメニューが閉じられることを示します。

私のサイドメニューのすべてのボタンではなく、いくつかのボタンにそのディレクティブを追加する必要があるので、[attr.menuClose]="..."構造を使用することにしました。

これは正常に動作しますが、私のアプリでは、代わりにディレクティブmenuCloseを得るための、私の代わりにmenuclose（ノート総額）を取得します。

私は選択した大文字と小文字を区別するために角2をどうにかしてもらえますか？

マイテンプレート

<button [attr.menuClose]="''" ion-item *ngFor="let item of this.root" (click)="openItem(item)"> 
    {{item.text}} 
</button> 

私が得る結果：[attr.some-attribute]を使用して

<button class="item-block item item-ios" ion-item="" tappable="" menuclose=""> 

Answer 1

は条件付きでsrcまたはhrefまたはnameまたはidのような実際のhtml要素を設定するために使用されますが、属性ディレクティブをバインドするためのものではありません。あなたはこのような何かを行うことができます

：

代わりに、あなたのような何かをする必要がありますあなたはコードの重複を持っているよう

が

<button *ngIf="someCondition" menuClose ion-item *ngFor="let item of this.root" (click)="openItem(item)"> 
    {{item.text}} 
</button> 
<button *ngIf="!someCondition" ion-item *ngFor="let item of this.root" (click)="openItem(item)"> 
    {{item.text}} 
</button> 

これは理想的ではありません。

より良い選択肢は、menuCloseがどのように機能するかを見て、それ以外の条件に拡張することです。 https://github.com/driftyco/ionic/blob/dbfc183cac036099603f9e51611bfccbc900a08b/src/components/menu/menu-close.ts

あなたがこれを行う簡単なディレクティブを作成することができ、および動作を有効または無効にするブール述語を取ります

UPDATE

menuCloseのソースはこちらです。

@Directive({ 
    selector: '[myMenuClose]' 
}) 
export class MyMenuClose { 

    @Input() myMenuClose: boolean; 

    constructor(private _menu: MenuController) {} 

    @HostListener('click') 
    close() { 
    if (this.myMenuClose) { 
     const menu = this._menu.get(); 
     menu && menu.close(); 
    } 
    } 
} 

この指示文は、menuCloseとは少し異なります。それを有効または無効にするにはブール条件を渡します。