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

Question

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

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

点击时我会开另一个div我需要第二次DIV 5秒被打开后显示的第一个div元素。提前致谢。

Answer 1

使用setTimeOut功能。

// HTML

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

//组件

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

Answer 2

试试这个：

在HTML模板：

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

在您的组件：

这样

<div (click)="onClick($event)"><p *ngIf="showMe">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

更改HTML模板定义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; 
     } 
    } 
}