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()のイベントが発生しました。

この機能は、ドキュメントをクリックするたびに表示されます。したがって、この関数を使用するように注意してください。

ここでは、クリックされた要素がtestBoxかボタンかを確認します。いいえの場合は、テストボックスを非表示にします。

それはすべてです！

希望すると、これが役立ちます。

Answer 2

シナリオは要素を非表示にし、DOM構造を操作しないようにするため、<div>に適用される属性ディレクティブを作成できます。

怒鳴る1つのソリューションの検索：

<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）に設定されている

指令

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

使用法を。

説明showMe指令が指令属性自体showMeある（@Inputで注釈）入力を定義

。これにより、外部からもこの値を渡し、それに応じて反応することができます。したがって、これはstyle.displayの値を設定し、変更イベントをトリガーする設定ツールです。

showMeディレクティブは、showMeChangeと呼ばれる出力（@Outputで注釈付き）も定義します。これは、モデルの変更を反映するためであり、指令を使用するコンポーネントのプロパティーはそれに応じて変更されます。

showMeディレクティブは、@HostListener('click', ['$event'])を使用して適用される要素のclickイベントにサブスクライブします。したがって、イベントがクリックされると、イベントは伝播しないので、document.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); 
    } 
    }