我有一些使用ngIf的div,我只是想知道特定的div是否是现在可见/活动的那个像焦点(它不起作用)之类的事件触发器,以及这个事件,我会设置一个变量或者其他东西。
<div *ngIf="test === true" (focus)="myVariable = true">
</div>
触发更改检测后,您的div将呈现并可见。检测到更改后,将再次运行整个生命周期。
如果你想运行某些东西,你应该挂钩生命周期中的一个事件。我建议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
}
}
这可能是一种可能的解决方法。它可能不是最好的但可行。
在html文件中,
<div *ngIf="show()"> </div>
在组件TS文件中,
show(){
if(test){ //condition for showing the div
myVariable = true;
return true;
}
else
return false;
}