web-dev-qa-db-ja.com

ngIfで要素が表示されたときにイベントをトリガーします

私はngIfでいくつかのdivを持っています、特定のdivがフォーカスのようなイベントトリガー（それが機能しない）または何かのように、現在表示されている/アクティブであるかどうかを知る方法を持っているだけで、このイベントでは、変数などを設定します。

<div *ngIf="test === true" (focus)="myVariable = true">
</div>
javascriptangularevent-handlingdom-eventsangular-event-emitter
6
Manzur Khan

ラキットの答えを基にしたいと思います。

<div *ngIf="test"><ng-container *ngIf="runShow && show()"></ng-container></div>

そしてコンポーネント内

_this.runShow = true;

//show always returns true.
show() {
  //Return if not running. Shouldn't be needed as runShow proceeds show in the template.
  if(!this.runShow) {
    return true;
  }
  //Do modifications...

  this.runShow = false;
  return true;
_

show()は、テストが真実である場合にのみ実行され、1回の反復後に自動的にオフになります（もちろん、_this.runShow_を何かに基づいて変更できます）。重要な落とし穴は、_this.runShow == false_まで、コンポーネントが変更を検出するたびに実行されることです。 show（）を独自のng-container内に配置して、DOMに影響を与えず、テストがレンダリングされた後に実行されるようにします。

1
Cameron Burger

これは回避策の可能性があります。それは最良のものではないかもしれませんが、動作します。

Htmlファイルでは、

<div *ngIf="show()"> </div>

コンポーネントTSファイルでは、

show(){
  if(test){ //condition for showing the div
    myVariable = true; 
    return true;
  }
  else
    return false;
}
1
Rachit Shroff