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