javascript - 当元素通过 ngIf 变得可见时触发事件

Question

我有一些带有 ngIf 的 div，我只是想有一种方法来知道特定的 div 是否是现在可见/事件的那个，比如像焦点这样的事件触发器(它不起作用)或其他东西，对于这个事件，我将设置一个变量或其他东西。

<div *ngIf="test === true" (focus)="myVariable = true">
</div>

Answer 1

一旦触发更改检测，您的 div 将被渲染并可见。当检测到变化时，整个生命周期将再次运行。

如果你想运行一些东西，你应该 Hook 生命周期的事件之一。我建议使用 AfterViewInit。

现在您知道如何操作了，让我们看看您应该做什么。

在您的情况下，您应该使用模板引用创建 div。这将允许您引用该元素，并使您能够检查显示或隐藏了哪个 div。

Here is a stackblitz它向您展示了它是如何工作的，这是代码:

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div *ngFor="let item of [0, 1, 2, 3, 4, 5]; let i = index">
    <span *ngIf="i === show" #shownDiv [id]="'div-' + i">{{ item }}</span>
  </div>
  `
})
export class AppComponent {
  name = 'Angular 6';
  show = 0;

  @ViewChildren('shownDiv') divs: QueryList<ElementRef>;

  ngOnInit() {
    setInterval(() => {
      this.show++;
      if (this.show > 5) {
        this.show = 0;
      }
    }, 1000);
  }

  ngAfterViewChecked() {
    let shown = this.divs.find(div => !!div);
    console.log('DIV shown is ' + (shown.nativeElement as HTMLSpanElement).id);
    // Now that you know which div is shown, you can run whatever piece of code you want
  }
}