Angular - 事件綁定

這是一個Bootstrap面板。如果用戶點擊圖標，隱藏的部分變得不隱藏，但我需要的是隻隱藏那個被點擊的部分。Angular - 事件綁定

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

我可以通過定義自己的每一個動作實現它，但我要如何做一個更通用的方法？

試圖通過$event，就像這樣：

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

而且

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

，但沒有任何運氣..

來源

2017-06-14 J.D.

這是一種很難理解你的要求。你可以創建一個Plunker來演示嗎？或者也許添加一個圖像來顯示行爲？ – Askanison4

是點擊事件觸發你檢查控制檯日誌 – CharanRoot

@Jonnysa - 是的，它確實。絕對檢查 –

如果你正在尋找一個通用的，可重複使用的解決方案，只需寫一條指令去做你所要求的。然後，您只需在適當的模塊中聲明它並將其添加到元素中即可。

@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屬性的造型。您可能需要更改該指令適用display: none的元素風格，還是堅持一個全球性的規則來進行hidden屬性在styles.css/styles.scss：

[hidden] { 
    display: none; // may need to be !important 
}

來源

2017-06-14 16:17:17 joh04667

Angular - 事件綁定

回答

相關問題