Question

我想检查div是否打开5秒钟，然后在我的父div中显示一个元素。所以我这样：

<div (click)="opened = !opened"><p>show me after 5 seconds</p></div>
<div *ngIf="opened"></div>

点击i＆＃39;打开另一个div，我需要在第二个div打开5秒后在第一个div中显示一个元素。提前谢谢。

Answer 1

像这样更改html模板

<div (click)="onClick($event)"><p *ngIf="showMe">show me after 5 seconds</p></div>
<div *ngIf="opened"></div>

现在在课程中定义onClick方法，opened和showMe

opened: boolean = false;
showMe: boolean = false;

onClick(event) {
   if(!this.opened) {
       this.opened = true;
       setTimeout(() => {
            this.showMe = true;
       }, 5000)
   }
}

如果你想切换 div

onClick(event) {
   if(!this.opened) {
       this.opened = !this.opened;
       if(!this.showMe){
           setTimeout(() => {
               this.showMe = !this.showMe;
           }, 5000);
       } else {
           this.showMe = !this.showMe;
       }
   }
}

Answer 2

试试这个：

在您的HTML模板中：

<div (click)="onClick()"><p *ngIf="pOpened">show me after 5 seconds</p></div>
<div *ngIf="opened"></div>

在您的组件中：

public onClick = () => {
    this.opened = !this.opened;
    setTimeout(() => {this.pOpened = this.opened}, 5000);
}

Answer 3

使用setTimeOut功能。

// html

<div (click)="open(opened)"><p>show me after 5 seconds</p></div>

//组件

open(opened: boolean){
     setTimeout(function(){
          this.opened = !opened;
        },3000);
    }

在Angular 2中显示一段时间后的文本

3 个答案: