2017-06-14 13 views
0

ここにはブートストラップパネルがあります。ユーザーがアイコンをクリックすると、非表示の部分は表示されなくなりますが、クリックすると表示されている部分だけを非表示にする必要があります。角度イベントバインディング

@Component({ 
     template: ` 
     <div class="panel panel-default"> 
      <div class="panel-heading" *ngFor="let fizz of fizzes"> 
      <div class="row"> 
       <div class="col-md-2"> 
       <i class="glyphicon {{ fizz.iconClass }}"></i> 
       </div> 
       <div class="col-md-8"> 
       {{ fizz.heading }} 
       </div> 
       <div class="col-md-2"> 
       <i class="glyphicon glyphicon-menu-down clickable" (click)="onClick()"></i> 
       </div> 
      </div> 
      </div> 
      <div class="panel-body" [hidden]="!clicked"> 
      {{ fizz.content }} 
      </div> 
     </div> 
     ` 
    }) 

    export class FizzComponent { 
     fizzes: object[]; 
     clicked = false; 

     onClick(event: any) { 
     this.clicked = !this.clicked; 
     } 
    } 

私はすべてのアクションを独自に定義することで達成できましたが、もっと一般的なやり方でどのように行うのですか?あなたは一般的な、再利用可能な解決策を探している場合は、単に..

<i class="glyphicon glyphicon-menu-down clickable" (click)="onClick($event)"></i> 

そして

onClick(event: any) { 
    event.target.clicked = !event.target.clicked; 
    } 

しかし、運のない

+0

それはあなたが求めているかを理解するためにこの種のことは困難です。あなたはデモンストレーションするためにプランカを作成できますか?または、画像を追加してその動作を表示しますか? – Askanison4

+0

はクリックイベントです。コンソールログで確認しました – CharanRoot

+0

@Jonnysa - そうです。間違いなくチェックされているのは –

答えて

2

を:

はそうのように、$eventを渡そうとしましたあなたが聞いたことをする指示を書いてください。次に、適切なモジュールで宣言し、要素に追加するだけです。その後、あなたのマークアップで

@Directive({ 
    selector: '[appHideOnClick]' 
}) 
export class HideOnClickDirective { 



    @HostListener('click') onClick() { 
     // toggle hidden on clicked 
     this.isHidden = !this.isHidden; 
    } 

    @HostBinding('hidden') isHidden = false; // initialize without hidden attribute 

    constructor() {} 
} 

<div class="panel-body" appHideOnClick > 

角度でないすべての要素がそれに接続されているhidden属性のスタイルを持っていることを覚えておいてください。あなたはstyles.css/styles.scsshidden属性のグローバルルールを要素のスタイルにdisplay: noneを適用するか、固執するディレクティブを変更するのいずれかが必要な場合があります。

[hidden] { 
    display: none; // may need to be !important 
} 
関連する問題