Инициирующее событие, когда элемент становится видимым с помощью ngIf - PullRequest
Новая
       16

Инициирующее событие, когда элемент становится видимым с помощью ngIf

0 голосов
/ 31 мая 2018

У меня есть некоторые div с ngIf, я просто хочу узнать, является ли конкретный div тем, который видим / активен сейчас, как триггер события, например фокус (он не работает) или что-то в этом роде.и с этим событием я установлю переменную или что-то. 

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

Ответы [ 3 ]

0 голосов
/ 31 мая 2018

Это может быть возможным обходным путем.Возможно, он не самый лучший, но будет работать.

В html-файле, 

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

В компонентном файле TS, 

show(){
  if(test){ //condition for showing the div
    myVariable = true; 
    return true;
  }
  else
    return false;
}
0 голосов
/ 03 июля 2019

Я хотел бы основываться на ответе Рахита.

<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() будет работать только в том случае, если проверка вернаи отключится после одной итерации (конечно, вы можете изменить this.runShow, чтобы он был основан на чем-то).Важным моментом является то, что до this.runShow == false это будет выполняться каждый раз, когда компонент обнаруживает изменение, не больше и не меньше.Мы помещаем show () в его собственный ng-контейнер, чтобы он не влиял на DOM и запускался после рендеринга теста.

0 голосов
/ 31 мая 2018

Ваш div будет визуализирован и видим после запуска обнаружения изменений.При обнаружении изменения весь жизненный цикл запускается снова.

Если вы хотите что-то запустить, вам нужно подключить одно из событий жизненного цикла.Я предлагаю AfterViewInit.

Теперь, когда вы знаете, как, давайте посмотрим, что вы должны делать.

В вашем случае вам следует создать div с ссылками на шаблоны.Это позволит вам иметь ссылку на элемент и позволит вам проверить, какой div показан или скрыт.

Вот блик стека , который показывает вам, как он работает, и вот код: 

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
  }
}
...