javascript 当元素变得可见时触发事件 ngIf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50618108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger event when element becomes visible with ngIf
提问by Manzur Khan
I'm having some divs with ngIf, I just want to have a way to know if the particular div is the one which is visible/active right now like an event trigger like focus (it doesn't work) or something, and with this event, I will set a variable or something.
我有一些带有 ngIf 的 div，我只是想有一种方法来知道特定的 div 是否是现在可见/活动的 div，就像一个事件触发器，如焦点（它不起作用）或其他东西，以及这个事件，我会设置一个变量什么的。
<div *ngIf="test === true" (focus)="myVariable = true">
</div>
采纳答案by Manzur Khan
Your div will be rendered and visible once the change detection is triggered. When a change is detected, the whole lifecycle is ran again.
一旦触发更改检测，您的 div 将呈现并可见。当检测到更改时，将再次运行整个生命周期。
If you want to run something, you should hook on one of the events of the lifecycle. I suggest AfterViewInit.
如果你想运行一些东西，你应该钩住生命周期的事件之一。我建议AfterViewInit。
Now that you know how, let's see what you should do.
既然你知道怎么做，让我们看看你应该做什么。
In your case, you should create div with template references. This will allow you to have a reference to the element and make you able to check which div is shown or hidden.
在您的情况下，您应该使用模板引用创建 div。这将允许您引用元素并让您能够检查显示或隐藏哪个 div。
Here is a stackblitzthat shows you how it works, and here is the code :
这是一个堆栈闪电战，向您展示了它是如何工作的，这是代码：
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
}
}
回答by Cameron Burger
I would like to build on Rachit's answer.
我想以 Rachit 的回答为基础。
<div *ngIf="test"><ng-container *ngIf="runShow && show()"></ng-container></div>
<div *ngIf="test"><ng-container *ngIf="runShow && show()"></ng-container></div>
and in the component
并在组件中
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()will only run if test is truthy, and will turn itself off after a single iteration (of course, you can change this.runShowto be based off something). An important gotcha is that until this.runShow == false, this will run every time the component detects a change, no more and no less.
We put the show() inside its own ng-container so that it doesn't impact the DOM and is run after the test is rendered.
show()只有在测试为真时才会运行，并且会在一次迭代后自行关闭（当然，您可以更改this.runShow为基于某些内容）。一个重要的问题是，直到this.runShow == false，每次组件检测到更改时都会运行，不多也不少。我们将 show() 放在它自己的 ng-container 中，这样它就不会影响 DOM 并在测试渲染后运行。
回答by Rachit Shroff
This can be a possible work around. It might not be the best one but will work.
这可能是一个可能的解决方法。它可能不是最好的，但会起作用。
In html file,
在 html 文件中，
<div *ngIf="show()"> </div>
In component TS file,
在组件 TS 文件中，
show(){
if(test){ //condition for showing the div
myVariable = true;
return true;
}
else
return false;
}
