Angular2當點擊任何div時，它應該是關閉

Question

這裏的代碼，當我cliktoshow方法，然後它顯示div。當我點擊這個div的時候它必須隱藏自己。

 public hideElement: boolean = false; 
 

 
     clicktoshow() 
 
     { 
 
      this.organizedetailsshow = false; 
 
      if (this.hideElement) { 
 
      this.hideElement = false; 
 
     } 
 
    else { 
 
     this.hideElement = true; 
 
    } 
 
    } 
 
    
 
    outsidehide(e) 
 
     { 
 
      console.log("event",e) 
 
      if(this != $("#myDiv")[0]) { 
 
      this.hideElement = false; 
 
      } 
 
     }(e) 
 
     { 
 
      console.log("event",e) 
 
      if(this != $("#myDiv")[0]) { 
 
      this.hideElement = false; 
 
      } 
 
     }

<div> 
 
    <div> 
 
    <button (click)= "clicktoshow()"> Click to show button </button> 
 
    <div !hideElement (click)=outsidehide($event)> 
 
     hi 
 
     </div> 
 
       <p> Hi hello </p> 
 
    </div>

這裏的代碼，當我cliktoshow方法話，就說明在div。當我點擊這個div它必須隱藏自己。

Answer 1

<span style="background-color:red;width:50px;height:50px" *ngIf="isDivHide" id="testBox"> Testing </span> 

<button (click)="bounce()" id="btn"> Bounce me </button> 

如果上面是你的HTML和MyAnimation是你相應的組件，那麼你可以配置你的組件這樣，

@Component({ 
    selector: 'my-anim', 
    templateUrl: 'App/Animation/animation.html', 
    host: { 
     '(document:click)': 'onClick($event)', 
    } 
}) 

export class MyAnimation { 
    animationService = null; 

    isDivHide = false; 

    onClick = function (event) { 
     if (!$(event.target).is($('#testBox')) && !$(event.target).is($('#btn'))){ 
      // Hide the test box 
      this.isDivHide = false; 
     } 
    } 

    bounce = function() { 
     this.isDivHide = true; 
     } 

    constructor() { 
     this.isDivHide = false; 
    } 
} 

說明

host: { 
    '(document:click)': 'onClick($event)', 
} 

這將綁定的點擊事件document至onClick()功能。

因此，每次點擊文檔時都會觸發此功能。所以要小心使用這個功能。

onClick = function (event) { 
    if (!$(event.target).is($('#testBox')) && !$(event.target).is($('#btn'))){ 
     // Hide the test box 
     this.isDivHide = false; 
    } 
} 

在這裏你檢查點擊的元素是你的testBox還是按鈕。如果沒有，那麼隱藏你的測試盒。

就是這樣！

希望這會幫助你。

Answer 2

因爲你的場景是隱藏一個元素而不是操縱DOM結構，你可以創建一個屬性指令來應用到你的<div>。

查找波紋管的一個解決方案：

指令

import {Directive, ElementRef, EventEmitter, HostListener, Input, Output} from '@angular/core'; 

@Directive({ 
    selector: '[showMe]' 
}) 
export class ShowMeDirective { 

    private _show: boolean; 

    /** 
    * Emmit changes in 'showMe'. 
    * @type {EventEmitter} 
    */ 
    @Output('showMeChange') 
    public showChange = new EventEmitter(); 

    /** 
    * Called when the 'showMe' expression changes. 
    * @param show Whether to show or hide the element. 
    */ 
    @Input('showMe') 
    public set show(show: boolean) { 
    this.elRef.nativeElement.style.display = show ? null : 'none'; 
    this._show = show; 
    } 

    /** 
    * Get whether the element is visible. 
    * @returns {boolean} 
    */ 
    public get show() { 
    return this._show; 
    } 

    /** 
    * Ctor. 
    * @param elRef References the element 
    */ 
    constructor(private elRef: ElementRef) { 
    } 

    /** 
    * Stop propagating click event for current element. 
    * @param $event Event arguments 
    */ 
    @HostListener('click', ['$event']) 
    public onElementClick($event) { 
    $event.stopPropagation(); 
    } 

    /** 
    * When the document is clicked then the element is hidden. 
    */ 
    @HostListener('document:click') 
    public onDocumentClick() { 
    if (this.show !== false) { 
     this.show = false; 
     this.showChange.emit(false); 
    } 
    } 
} 

用法

<div [(showMe)]="show" style="line-height: 50px; font-weight: bold;"> 
    Contents of DIV 
</div> 

<p>DIV is visible: {{ show }}</p> 
<br/> 

<button (click)="show = true; $event.stopPropagation();" type="button">Show DIV</button> 

show最初被設置爲一個值（例如：show = false）。

說明

的showMe指令定義的輸入（與@input註釋），它是指令屬性本身showMe。這也允許從外部傳遞這個值並作出相應的反應。因此，這是一個設置器，它設置style.display值並觸發更改事件。

showMe指令還定義了一個輸出（用@Output標註），它被稱爲showMeChange。這是爲了反映模型中的變化，以便使用該指令的組件將相應地改變它的屬性。

showMe指令使用@HostListener('click', ['$event'])訂閱其應用元素的click事件。因此，當點擊時，事件不會傳播，以便它不會被處理程序攔截。

showMe指令訂閱document.click事件以便使元素不可見。

<button>處理click事件，但他也通過執行$event.stopPropagation();阻止click冒泡到其他元素。

因爲showMe指令定義了showMe輸入和showMeChange輸出它可以寫爲<div [showMe]="show" (showMeChange)="show = $event;">。但它也可以寫成<div [(showMe)]="show">（香蕉盒裝風格）。

因此，您可以從指令內部操作可見性，但也可以從指令外部操作，從而傳遞數據來回傳遞。

注：以下if代碼防止射擊時的價值不是從指令中更改的事件：

public onDocumentClick() { 
    if (this.show !== false) { 
     this.show = false; 
     this.showChange.emit(false); 
    } 
    }