当元素在使用 ngIf 中变得可见时触发事件

Question

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

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

Answer 1

触发更改检测后，您的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
}
}

Answer 2

这可能是一个解决方法。它可能不是最好的，但会起作用。

在 html 文件中，

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

在组件 TS 文件中，

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

Answer 3

我想建立在Rachit的答案之上。

<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，并在测试渲染后运行。

Answer 4

一个解决方案是使用@ViewChildren并订阅ngAfterViewInit()中QueryList的changes可观察量，也是为了避免ExpressionChangedAfterItHasBeenCheckedError(例如，如果您想更改div 可见时模板中使用的属性，就会发生这种情况(您可以使用detectChanges()ChangeDetectorRef如下所示：

@Component({
selector: "my-app",
template: `
<div *ngIf="num % 10 === 0" #doSomethingWhenVisibleDIV>
Show some content
</div>
<div *ngIf="showOtherDiv">Show different content here</div>
`,
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
num: number = 0;
showOtherDiv: boolean = false;
private subscription: Subscription;
@ViewChildren("doSomethingWhenVisibleDIV") divs: QueryList<ElementRef>;
constructor(private changeDetectorRef: ChangeDetectorRef) {}
ngOnInit() {
setInterval(() => this.num++, 1000);
}
ngAfterViewInit() {
this.subscription = this.divs.changes.subscribe({
next: () => {
if (this.divs.length > 0) {
this.showOtherDiv = !this.showOtherDiv;
this.changeDetectorRef.detectChanges();
}
}
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}

堆栈闪电战示例