当有角度的 *ngIf 语句在模板中求值时触发的事件 [英] Event to fire when an angular *ngIf statement evaluates in template
本文介绍了当有角度的 *ngIf 语句在模板中求值时触发的事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果我有以下几点:
<p>{{user.name}}</p>
当上面的 div
最终出现在屏幕上时,我是否可以执行代码?
解决方案
*ngIf
将删除该 DOM 元素和所有附加的组件/指令.因此,您可以编写一个简单的指令,在首次创建事件时执行该事件.当 *ngIf
从 false 转换为 true 指令将被创建(一次又一次,等等...)
@Directive({selector: '[after-if]'})导出类 AfterIfDirective 实现 AfterContentInit {@Output('after-if')公开之后:EventEmitter= new EventEmitter();公共 ngAfterContentInit(): 无效 {//超时有助于防止意外更改错误setTimeout(()=> this.after.next());}}
示例 HTML:
<div *ngIf="user$ | async as user" (after-if)="你的表达式"><p>{{user.name}}</p>
If I have the following:
<div *ngIf="user$ | async as user" class="container">
<p>{{user.name}}</p>
</div>
Is there a way I can execute code when the div
above finally appears on screen?
解决方案
The *ngIf
will remove that DOM element and all attached components/directives. So you can just write a simple directive that executes an event when it's first created. When the *ngIf
transitions from false to true the directive will be created (again, and again, etc...)
@Directive({selector: '[after-if]'})
export class AfterIfDirective implements AfterContentInit {
@Output('after-if')
public after: EventEmitter<void> = new EventEmitter<void>();
public ngAfterContentInit(): void {
// timeout helps prevent unexpected change errors
setTimeout(()=> this.after.next());
}
}
Sample HTML:
<div *ngIf="user$ | async as user" (after-if)="your expression">
<p>{{user.name}}</p>
</div>
这篇关于当有角度的 *ngIf 语句在模板中求值时触发的事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文